google map displays fine first time; partial display after adding new marker

Question

I'm using google maps and jquery mobile.

When the user touches a button, a map displays.

There are markers on this map, they were already known when the user touched the map display button.

This works fine. Here's the html:

<div data-role="page" style="width: 100%; height: 100%" data-ajax="false" id="map-content"> 
    <div id="map_canvas" class="ui-content" style="width: 100%; height: 100%"></div>
</div>

Here's the javascript:

function showMap(){

var initLoc;

console.log("Pend showMap() START");    

$.mobile.changePage( "#map-content", { transition: "slideup"} ); 
$(document).on('pageshow', '#map-content',function(e,data){

    $('#map-content').height(getRealContentHeight());

    initLoc = new google.maps.LatLng(0,0);

        $('#map_canvas').gmap( { 'center': initLoc, 'zoom' : 16 } );
        $('#map_canvas').gmap('addMarker', {'position': initLoc, 
                                        'icon': gimage, 
                                        'shadow' : shadow,
                                        'bound': false});

    for (var i = 0; i<myArr.length; i++){
      var newLoc = new google.maps.LatLng(myArr[i][1], myArr[i][2]);
      $('#map_canvas').gmap('addMarker', {'id':i, 
                                          'position': newLoc, 
                                          'icon': bimage, 
                                          'shadow' : shadow,
                                          'bound': false}).click(function() {
                                                     $('#map_canvas').gmap('openInfoWindow', 
                                                                                           { 'content': 'some content }, 
                                                                                           this);
      });
    }

        google.maps.event.trigger($('#map_canvas'), 'resize');
        google.maps.event.trigger($('#map-content'), 'resize');
});

}

function getRealContentHeight(){
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
    }
    return content_height;
}

The problem comes when the user leaves this page with:

$.mobile.changePage("#main", { 
              transition: 'slide',
              reverse: true });

then adds a new marker to the map and tries to redisplay it by calling showMap()

What displays is a partial map with mostly blank space.

I've read this is a symptom of google maps not knowing the size of the screen to display, but the solution is supposed to be:

google.maps.event.trigger($('#map_canvas'), 'resize');
google.maps.event.trigger($('#map-content'), 'resize');    

Can anyone suggest the proper way to add markers to a previously rendered map and then redisplay the map?

Answer 1

This doesn't look correct to me:

google.maps.event.trigger($('#map_canvas'), 'resize');
google.maps.event.trigger($('#map-content'), 'resize');    

The first argument for google.maps.event.trigger needs to be a Google Maps Javascript API v3 object, in this case a google.maps.Map object.

The JQuery selector $('#map_canvas') does not return a google.maps.Map.

To get the required google.maps.Map, use: $('#map_canvas').gmap('getMap')

This should work for you:

google.maps.event.trigger($('#map_canvas').gmap('getMap'), 'resize');

(can't tell from your code whether there is a map on "map-content" or not, if so, you need to do the same thing there)