AngularJS google maps directive

Question

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;

}])

are you loading lodash.underscore.js ? It seems you need that script, though it should throw an error if you don't have it. info here — zok
– zok, Commented Jun 11, 2014 at 14:26

zewt112 · Accepted Answer · 2014-06-24 14:36:16Z

6

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

answered Jun 24, 2014 at 14:36

zewt112

3205 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrBoJangles · Accepted Answer · 2015-02-03 23:57:11Z

5

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>

edited Feb 3, 2015 at 23:57

MrBoJangles

12.3k17 gold badges65 silver badges83 bronze badges

answered Dec 19, 2013 at 18:09

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

2 Comments

Ashisha Nautiyal Over a year ago

How to change center dynamically

allenhwkim Over a year ago

@AshishNautiyal center="{{dynamicCenter}}" can do

Igor Loskutov · Accepted Answer · 2015-01-28 09:28:19Z

0

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

answered Jan 28, 2015 at 9:28

Igor Loskutov

2,3842 gold badges24 silver badges45 bronze badges

Comments

Nimantha · Accepted Answer · 2020-05-09 16:41:17Z

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>

Collectives™ on Stack Overflow

AngularJS google maps directive

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related