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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: