AngularJS google maps directive

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!

in the HTML

<html ng-app="Maptesting">

JavaScript
​x
 
<html ng-app="Maptesting">
​

<div ng-view></div>

JavaScript
 
<div ng-view></div>
​

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

JavaScript
 
<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;

}])

JavaScript
 
angular.module('Maptesting', ['google-maps'])
​
.controller('CtrlGMap', ['$scope', function($scope) {
        $scope.center = {
            latitude: 45,
            longitude: -73
        };
​
        $scope.markers = [];
        $scope.zoom = 8;
​
}])
​

Answer

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>

JavaScript
 
<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>
​

Advertisement

Answer