Question

I am using the jQuery 1.7 and the latest jQuery Mobile along with Google Maps Places library.

I am facing a problem similar to this question on polylines, except that I am not using (and if possible, would prefer to not use) any plugins.

Clicking a button on one page populates the map on another page in the same document.

I am trying to display all my search results as legibly and zoomed-in as possible by making use of the below code snippet..

var bounds = new google.maps.LatLngBounds();
for(var i=0; i<results.length; i++)
{
    var resCoOrds = new google.maps.LatLng(results[i].geometry.location.lat(), results[i].geometry.location.lng());
    var marker = new google.maps.Marker({
        position : resCoOrds, 
        map : myMap, 
        icon: myMarkerIcon
    });

    makerList.push(marker);

    google.maps.event.addListener(marker, 'click', function()
    {
        var resInfoWindow = new google.maps.InfoWindow({content:liContent});
        resInfoWindow.open(map, this);
    });


    bounds.extend(resCoOrds);
    myMap.fitBounds(bounds);
}

My problem is a result of the last line above!

Addition of the first marker works as expected, but on addition of the second marker, the map gets zoomed way out making all my search results appear together on a small dot on the map, forcing user to zoom in, which does not serve my purpose..

This zooming out does not happen for the same code when

• not using jQuery Mobile!!

• the map is on the same page as the Search button that populates the map with the markers

Any help or pointers is very much appreciated..

Thanks in advance..

Regards,

Achu

Answer 1

Figured it out…

Here is my solution : I noticed that the zoom issue is not present if the map is already loaded AND visible on the active page by the time I start adding the markers or call map.fitBounds(). So I used the map’s tilesloaded event to wait until the map is ready, and then add markers & fit bounds.

Below is the code I used…

function searchCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) 
    {
        if (results.length) 
        {
            $.mobile.changePage("#mapview");
            google.maps.event.addListenerOnce(map, "tilesloaded", function()
            {
                var bounds = new google.maps.LatLngBounds();
                for ( var i = 0; i < results.length; i++) 
                {
                    /* code to add markers */
                    bounds.extend(results[i].geometry.location);
                }
                map.fitBounds(bounds);
            }   
        }
     }
 }

This approach solves my problem, but if anyone has a better solution, please do let me know..

Thanks..