Moving center of maps without deleting markers (Google Maps v. 3.0)

1
votes

I have a map with a lot of markers. However, I want to be able to change the center / zoom, without deleting the markers. I do this when a user search for an address and click "search".

I have the following center function which works, however, it also deletes all my markers!

    function centerMap(longitude, latitude) {
        var gMap = new google.maps.Map(document.getElementById('map-canvas'));
        gMap.setZoom(10);
        gMap.setCenter(new google.maps.LatLng(longitude, latitude));
    }

My markup is the classic:

   <div id="map-canvas" style="width: 900px; height: 700px;" />

Whole code when clicking the button:

$('#searchCityBtn').click(function () {
            var query = $('#addressBox').val();
            var url = '<%= ResolveUrl("~/services/geolocationservice.asmx/getlatitudeandlongitude") %>';
            $.ajax({
                type: "POST",
                data: "{'query':'" + query + "'}",
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (d) {
                    var jsonResp = JSON.parse(d.d);
                    centerMap(jsonResp.Item2,jsonResp.Item1);
                },
                error: function () {
                    alert('error guys');
                }
            });
        });

Of course, I have tried to get the map by doing this:

    function centerMap(longitude, latitude) {
        var gMap = document.getElementById('map-canvas');
        gMap.setZoom(10);
        gMap.setCenter(new google.maps.LatLng(longitude, latitude));

    }

But, then I get the errors no function called setZoom or setCenter exists.

How to solve this issue? :)

2
jquerygoogle-mapsgoogle-maps-api-3

2 Answers

2
votes

When you do:

function centerMap(longitude, latitude) {
    var gMap = new google.maps.Map(document.getElementById('map-canvas'));
    gMap.setZoom(10);
    gMap.setCenter(new google.maps.LatLng(longitude, latitude));
}

You are destroying the google.maps.Map object, and recreating a new one without any markers. If you make your original "gMap" in the global context, then you can do this:

// create gMap variable in the global context
var gMap = null;
// for creating the initial map
function createMap(longitude, latitude) {
    // initialize the global gMap variable
    gMap = new google.maps.Map(document.getElementById('map-canvas'));
    // center and zoom the map
    gMap.setZoom(10);
    gMap.setCenter(new google.maps.LatLng(longitude, latitude));
}
// to recenter the existing map
function centerMap(longitude, latitude) {
    // center and zoom the map
    gMap.setZoom(10);
    gMap.setCenter(new google.maps.LatLng(longitude, latitude));
}
1
votes

There are different ways, e.g.:

when you create the map, store the map as a property of #map-canvas:

var canvas=document.getElementById('map-canvas');
    canvas.map = new google.maps.Map(canvas,{/*options*/});

inside centerMap you'll be able to access this property:

function centerMap(longitude, latitude) {
    var canvas=document.getElementById('map-canvas');
    canvas.map.setZoom(10);
    canvas.map.setCenter(new google.maps.LatLng(longitude, latitude));
}