7

Using jQuery to construct and update the contents for a Google Maps API custom control overlay, Google Maps sometimes does not draw the updated contents.

Main.overlay = $('<div><div style="background:white"><div id="overlay"></div></div></div>').detach();
Main.map.controls[google.maps.ControlPosition.TOP_LEFT].push(Main.overlay[0]);

...

$('#overlay').html('New content');

Resizing the map by resizing the window will cause the new content to display. Mousing over the new content, the cursor changes as if the new content were there. I tried

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

to trigger a redraw, but since the map has not actually changed size, I'm guessing that is optimized away.

How can I tell Google Maps to force a redraw? Or is there something about the jQuery .html() function that might be causing this?

This problem occurs on Safari 7.0.2 (9537.74.9) on Mac OS X 10.9 and on the iPhone simulator, but does not occur on Firefox, Chrome, or on and iOS 6 iPad 2.

Inspecting the DOM shows that the changes are being made as desired, they are just not being displayed. Following suggestions at Force DOM redraw/refresh on Chrome/Mac adding

$('#overlay').hide().show(0);

works around what appears to be a Webkit bug.

Community
  • 1
  • 1
Avitzur
  • 161
  • 1
  • 8
  • Just a guess: could it be something z-index-ish? – PDXIII Oct 31 '14 at 10:05
  • trigger a resize (which you are doing now) once you have loaded the map that's it. The problem would be the map may not be loaded when you are resizing. put the line $('#overlay').html('New content') inside a jquery when() and do the resize as the callback. – astroanu Nov 25 '14 at 06:46

2 Answers2

0

I tried lots of ways of redrawing the map using the API and jQuery but none worked for me. I got around my issue, caused by asynchronous events not yet being complete, by using the 'idle' event, using it a bit like a callback.

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something when all other changes to the map have completed
});
Chris Smith
  • 480
  • 5
  • 12
0

Select the div where you wrap the google map in this way :

map = new google.maps.Map(document.getElementById("map"), {
    zoom: 1,
    center: {lat: 50.84, lng: 4.35},//belgium center in this example(you set your center predefined)

});

later each time refresh needed :

google.maps.event.trigger(map, 'idle');
Felipe Mora
  • 42
  • 1
  • 11