javascript - Google Maps Failing to render -
note: thought better make new question on this.
so asked question why google maps not rendering properly. answer seem straight forward , simple, accept code looks this:
var map; function initialize() { var mapoptions = { zoom: 8, center: new google.maps.latlng(-34.397, 150.644), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); google.maps.event.trigger(map, "resize"); } google.maps.event.adddomlistener(window, 'load', initialize); the issue map still broken:

this map stored in <div id="map"></div> has height of 350. div holds map part of jquery-ui tabs, has jquery skinning attached may affect things size , on.
with said map should work.
if open console , throw in: google.maps.event.trigger(map, "resize"); maps works expected.
i had google map (v3) embedded within jquery ui tabs, , had work around issue fix:
var initialized = false; $('.tabs').find('.ui-tabs-nav li').each(function() { if($(this).find('a').text() === 'location') { if($(this).hasclass('ui-state-active')) { initialize(); initialized = true; } else { $(this).click(function() { if(!initialized) { initialize(); initialized = true; } }); } } }); note initialize() should run starting map code. there lots of ways slice-and-dice initialization, point don't until tab we're looking ("location", in case) active.
Comments
Post a Comment