Section of Google Map not loading

Symptom: The page I was building had a google map on it. However, part of the Google Map did not load. (Google Maps Javascript API V3)

partially-loaded-google-map

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”

Solution: 

  • 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 class=”padded”>
                         <div google-map center=”mypage.center” zoom=”mypage.zoom”
                         markers=”mypage.markers” latitude=”mypage.latitude”
                         longitude=”mypage.longitude”>
                       </div>
             </div>
</div>

Advertisements