Clever Geek Handbook

Google Map API v3 disabled if reloaded (not a common "resize" thing)

I've read all similar questions, but mine is slightly different. The first time the jQuery Mobile dialog is displayed, the map is loaded within the normal map_canvas div, but if the dialog reloads (i.e. go back and click the button to reopen the dialog) it is only partially displayed, scaled down to 3 or 4 and centered around the top left corner of the div.

There is no change in the size of the div (which is explicitly set) and a is called for good measure google.maps.event.trigger(map, 'resize');

.

I also tried to initialize the map after and the dialog is shown, but the result is the same.

Button code:

$("#dest-map-button").click(function() {
            initializeMap(job_id,"map_canvas");
        }
);

Functions:

function initializeMap(job_id, map_div){

    var pos = arrJobs[job_id].lat_lng.split(',');
    var job_pos = new google.maps.LatLng(pos[0],pos[1]);

    var driverLatLng = lat_lng.split(',');
    var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]);

    var myOptions = {
        zoom: 18,
        center: driver_pos,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    }

    map = new google.maps.Map(document.getElementById(map_div), myOptions);

    var marker = new google.maps.Marker({
        position: job_pos,
        map: map,
        title: "Job"
    }); 

    var marker2 = new google.maps.Marker({
        position: driver_pos,
        map: map,
        title: "X",
    }); 

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

HTML:

    <div data-role="page" id="dialog-destination-map" data-theme="e">
    <div data-role="content">
      <div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;">
      map_canvas
      </div>
    </div>
  </div>

Any ideas?

EDIT: This question seems to describe the same issue: JQuery Mobile and Google Maps Glitch But the solution provided (caching) cannot be used here as the map might need to be changed

+3


source to share


4 answers


After trying everything else I finally stumbled upon an event pageshow

. Calling initializeMap

after all page transitions have finished, rather than when a button is pressed, resolved the issue:

$('#dialog-destination-map').live('pageshow',function(event){
    initializeMap(job_id,"map_canvas");
    }
);


I'm still wondering how it ended up working on first boot, then ...

+3


source


I agree with @peter .. You don't need to create a map on every showhow event. Try this instead:



$(document).on("pagebeforechange", function()
{
    if(mapObj){
        center = mapObj.getCenter();
    }
});
$("#mapPage").bind("pageshow", function()
{
    google.maps.event.trigger(mapObj, "resize");
    if(center)mapObj.setCenter(center);
});
+2


source


var driverLatLng

initialized lat_lng.split(',');

that was not previously declared.

0


source


You don't have to create a new map every time you visit the page. Create a map in advance, for example. on pageinit

. On pageshow

:google.maps.event.trigger(mapObj, "resize");

0


source






More articles:


All Articles