Facu Ferrari
Facu Ferrari

Reputation: 143

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">
<div ng-view></div>
<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;

}])

Upvotes: 1

Views: 15165

Answers (4)

Jordelca
Jordelca

Reputation: 84

Do you need to use refresh="!isMapElementHidden"?
It should work if you remove these property.

http://embed.plnkr.co/p9rXdx1GnmnuLKsEAMkE/preview

angular.js:

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

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

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

}])

index.html:

<html ng-app="Maptesting">
<body ng-controller="CtrlGMap">
<google-map center="center" 
            zoom="zoom" 
            markers="markers" 
            style="height: 400px; width: 100%; display: block;">
</google-map>

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<script type="text/javascript" src="angular.js"></script>

<script type="text/javascript" src="angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>


</script>
</body>
</html>

Upvotes: 0

allenhwkim
allenhwkim

Reputation: 27738

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>

Upvotes: 5

Igor Loskutov
Igor Loskutov

Reputation: 2325

As zewt112 already mentioned, it can be resolved by adding

.angular-google-map-container {
    height: 400px;
}

But beware that in latest version class name is exactly angular-google-map-container and not angular-google-maps-container

Upvotes: 0

zewt112
zewt112

Reputation: 320

I had this problem. The solution was to ensure that in your CSS you include a height value for the 'angular-google-map-container' class. You don't have to add this class to your HTML; it is already included in the Javascript for the angular-google-maps directive. Adding the height as an inline style will not work because this specific class is added added through transclusion within the directive.

.angular-google-maps-container {
    height: 400px;
}

Upvotes: 6

Related Questions