Set zoom level when deleting marker

Question

using javascript google-maps api

I currently have a setting for removing the creator that I set when I add this location

function addLocation(map,location) { var point = new GLatLng(location.lat, location.lon); var marker = new GMarker(point); map.addOverlay(marker); bounds.extend(marker.getPoint()); $('<a href="#" class="closebutton">').click(function(e){ e.preventDefault(); $(this).parent().remove(); map.removeOverlay(marker); map.closeInfoWindow(); }).prependTo($('<li>'+location.label+'</li>').click(function() { showMessage(marker, location.label,map); }).appendTo("#list")); GEvent.addListener(marker, "click", function() { showMessage(marker, location.label,map); }); } 

then I have a function that sets the zoom level

  function zoomToBounds(map) { map.setCenter(bounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(bounds) - 1); } 

this is called after my addLocations function and does what I want and sets the zoom level so that I can see all creators.

Now, if I call zoomToBounds right after

  map.removeOverlay(marker); 

then it does not move, it remains at the same zoom level

so I want to know if there is a way to set the zoom level after removing the marker ??

Answer 1

Hey, this is definitely something you can accomplish using the Google Maps API.

One important thing you need to do is update the GLatLngBounds object before trying to get the GMap2 object to recalculate its position and zoom level.

To do this, I would suggest storing some kind of data warehouse of all points used by GMarkers.

Using GEvent listeners, you can also bind the zoomToBounds function to the event when GMarker is deleted.

Here is the code snippet I'm talking about:

 var bounds = new GLatLngBounds(); var points = {}; function createMarker(location) { /*Create Our Marker*/ var point = new GLatLng(location.lat,location.lon); var marker = new GMarker(point); /*Add an additional identifier to the Marker*/ marker.myMarkerName = 'uniqueNameToIDMarkerPointLater'; /*Store the point used by this Marker in the points object*/ points[marker.myMarkerName] = point; /*Create an event that triggers after the marker is removed to call zoomToBounds*/ GEvent.addListener(marker,"remove",function() { /*Passes the marker ID to zoomToBounds*/ zoomToBounds(this.myMarkerName); }; /*Add the new point to the existing bounds calculation*/ bounds.extend(point); /*Draws the Marker on the Map*/ map.addOverlay(marker); } function zoomToBounds(name) { /*Remove the Point from the Point Data Store*/ points[name]=null; /*Create a new Bounds object*/ bounds = new GLatLngBounds(); /*Iterate through all our points and build our new GLatLngBounds object*/ for (var point in points) { if (points[point]!=null) { bounds.extend(points[point]); } } /*Calculate the Position and Zoom of the Map*/ map.setCenter(bounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(bounds)-1); } 

The GLatLngBounds object does not save all the points that it used to calculate the maximum and minimum borders, so you need to create a new object to redefine the borders of the rectangle.

I also created an example of the functioning of this located here .

Feel free to use the source code for everything you need - let me know how you made it out, or if you have other questions!

Here is the code without comments:

 var bounds = new GLatLngBounds(); var points = {}; function createMarker(location) { var point = new GLatLng(location.lat,location.lon); var marker = new GMarker(point); marker.myMarkerName = 'uniqueNameToIDMarkerPointLater'; points[marker.myMarkerName] = point; GEvent.addListener(marker,"remove",function() { zoomToBounds(this.myMarkerName); }; bounds.extend(point); map.addOverlay(marker); } function zoomToBounds(name) { points[name]=null; bounds = new GLatLngBounds(); for (var point in points) { if (points[point]!=null) { bounds.extend(points[point]); } } map.setCenter(bounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(bounds)-1); }