partially loaded google map caused by initially hidden, but loaded, Google Map
Problem: The Google Map on the page was not shown when the page loaded. When a user selected a radio button, the div containing the Google Map was shown. As stated by Michael Geary on Stack Overflow, “The Google Map container is hidden or has zero dimensions at the time you create the map”
- Defer creating the map until the container element is visible and sized properly, or
- Call google.maps.event.trigger( map, ‘resize’ ) after the map becomes visible or is resized. This event tells the Maps API to readjust its calculations of what’s visible in the map.
My Solution: As I was using angular and bootstrap, I added the ng-if attribute to accompany the ng-show attribute:
<div ng-if=”mypage.whatuserwantstosee == ‘map'” ng-show=”mypage.whatuserwantstosee == ‘map'”>
<div google-map center=”mypage.center” zoom=”mypage.zoom”