Question

using javascript google-maps api

I currently have it setup to remove a maker I set it up when I am adding a location like so

  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 it do and sets the zoom level so I can see all the makers.

Now if I put a call to zoomToBounds right after

  map.removeOverlay(marker);

then it doesn’t move it just stays at the same zoom level

so what I want to know is if there is a way for me to set the zoom level after I remove a marker ??

Answer 1

Hey there – this is definitely something you can accomplish using Google Maps API.

One important thing that you need to make sure you do is update the GLatLngBounds object before attempting to have the GMap2 object recalculate it’s position and zoom level.

To do this, I would suggest keeping some sort of data store of all the points the GMarkers are using.

Using GEvent Listeners you can also tie the zoomToBounds function to an event, when a GMarker is removed.

Here is a code snippet of what I am 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's 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 store all of the points that it used to calculate it’s maximum and minimum bounds – so a new object needs to be created to redefine the bounds of the rectangle.

I also created a functioning example of this located
here.

Feel free to use the source code to whatever you need – let me know how you make out with it, or if you have any other questions!

Here is the code without any 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);
}