AngularJS google maps directive

Facu Ferrari picture Facu Ferrari · Sep 19, 2013 · Viewed 15k times · Source

Hi i'm trying to develop an app using angularjs and a directive that I've found for instantiate GMaps: http://nlaplante.github.io/angular-google-maps/#!/usage. I follow all the steps but I cant get to render the map! it returns no errors! HELP!!

in the HTML

<html ng-app="Maptesting">

<google-map center="center" 
            zoom="zoom" 
            markers="markers" 
            refresh="!isMapElementHidden" 
            style="height: 400px; width: 100%; display: block;">
</google-map>

<div ng-view></div>

<script type="text/javascript" src="js/angular/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>

<script src="app/map.js">
</script>

In the controller:

angular.module('Maptesting', ['google-maps'])

.controller('CtrlGMap', ['$scope', function($scope) {
        $scope.center = {
            latitude: 45,
            longitude: -73
        };

        $scope.markers = [];
        $scope.zoom = 8;

}])

Answer

allenhwkim picture allenhwkim · Dec 19, 2013

Different answer, but I felt google-maps-directive is harder for me to use. Thus, I have created a google maps angularjs directive called, ng-map for my own project. This does not require any Javascript coding for simple functionality.

it looks like this

<map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</map>