Google Maps doesn't load the 2nd time - AngularJS

落爺英雄遲暮 提交于 2019-12-22 05:24:33

问题


I'm using the GoogleMap API ('angular-google-maps' js package) and I have a very weird behavior.

The first time I load it, i get the full map loaded, like here:

Then i close the dialog and reopen it, i see this:

Keep in mind, that the map is displayed as a dialog on top of another dialog.

Any ideas?


回答1:


If you are using Angular Google Map module you must add the refresh attribute to the googlemap element.

As it written in the Module documentation:

refresh = "expression" - Expression which, if it evaluates to true, will trigger a map refresh. Useful when the map is initially hidden.




回答2:


You have to redraw the map. You can do this using the following code:

google.maps.event.trigger(map, 'resize');

This will make the map refresh, fixing your issue.




回答3:


just add:

$scope.render = true;

and add ng-if="render" to your your map control, like this:

<ui-gmap-google-map ng-if="$parent.render" center="map.center" zoom="map.zoom">
        <marker coords="map.center"></marker>
    </ui-gmap-google-map>



回答4:


Issue is answered here https://github.com/allenhwkim/angularjs-google-maps/issues/88

you need to center it manually to avoid this problem like the following,

In your js controller

$scope.$on('mapInitialized', function (event, map)
{
    window.setTimeout(function() {
      window.google.maps.event.trigger(map, 'resize');
      map.setCenter(new google.maps.LatLng(38,-98));
    }, 100)
});

And in your HTML

<ng-map ng-if="subView=='map'" center="38,-98" zoom="5"></ng-map>


来源:https://stackoverflow.com/questions/26632791/google-maps-doesnt-load-the-2nd-time-angularjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!