Google Maps not correctly initialising within Angular directive

Question

I am trying to use the Google Maps API to display a map within an Angular site but it appears to not initialise correctly.

My html page uses bootstrap nav nav-tabs and I use an Angular controller to switch between them.

<ul class="nav navbar-nav">
    <li ng-class="{ active:myCtrl.isSet('map') }">
        <a href ng-click="myCtrl.setTab('map')">Show Map</a>
    </li>
</ul>

With one of the tabs containing only the google map canvas element - set up using an angular directive

Module.directive('mapPage', function() {
    return {
        restrict: 'E',
        template: '<div id="map-canvas"></div>'
    };
});

Within my angular controller I set up a listener for the window 'load' event to initialise the map as follows:

google.maps.event.addDomListener(window, 'load', myCtrl.initMap);


myCtrl.initMap = function() {

    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(55.937879, -3.241619),
    };

    myCtrl.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(55.937879, -3.241619),
        map: myCtrl.map
    });

    myCtrl.map.setCenter(new google.maps.LatLng(55.937879, -3.241619));
}

What I see on screen is the map element showing a grey area with the location marker not centered correctly (it's just off screen).

If I move the map-canvas div to the main section of my index.html page (rather than a sub page within the app) it loads correctly, so I know my Google API js code and html is correct. The map also shows if the page is resized.

It just doesn't work when used on a page that is not rendered immediately. I have tried searching for similar questions/answers but could not find this particular issue.

I have created a simple fiddle that demonstrates the issue.

http://jsfiddle.net/johntough/nc0u7h2c/5/

Any help appreciated!

You are still using V2 APi which is deprecated, though it can not be a reason but its good to use latest V3 — Anand G
– Anand G, Commented Sep 11, 2015 at 10:30

Anand G · Accepted Answer · 2015-09-11 11:19:26Z

1

The issue is, you are loading Map on window load whereas the container will appear on click. Google Map has behavior (never seen documented yet but I have observed it many time though) that if the container is hidden on load, it does not load map in there. I changed your "load" to "click" and its working. The only change is as below,

google.maps.event.addDomListener(window, 'click', myCtrl.initMap);

See fiddle and verify yourself. http://jsfiddle.net/anandgh/nc0u7h2c/6/

edited Sep 11, 2015 at 11:19

answered Sep 11, 2015 at 10:29

Anand G

3,2082 gold badges24 silver badges30 bronze badges

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

2 Comments

John Tough Over a year ago

Thanks - that does indeed solve the initialisation of the map. It does however mean that the map is recreated on every mouse click within the window, which is a lot of unnecessary function calls. But I can easily enough work around that by having a check to see if the map is already initialised. Thanks very much!

Anand G Over a year ago

You can avoid loading map on each click by maintaining a veritable in $scope which will check if map is loaded. BTW, I am glad that I could help you.

Collectives™ on Stack Overflow

Google Maps not correctly initialising within Angular directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related