jay's tags:
jay's most popular posts:
jay reads (3):
Who's reading jay (7):

google maps api - dynamically selecting zoom and center point

jay posted on May 11, 2007 | views: 14053 | Tags: google maps api, mysql, programming, Javascript, getBounds, ZOOM, boundaries, center zoom, set bounds
I'm making a map mashup that generates maps for various points. I took me a little while to figure out how to set the center and zoom level based on the points being mapped so here it is.

  var geocoder = null;
  var map = null;
  var online = true;
  var bounds = new GLatLngBounds();
 
  function load() {
    if (online && GBrowserIsCompatible()) {
      geocoder = new GClientGeocoder();

    map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());

      //showAll();
      map.setCenter(new GLatLng(0,0),0);
      //map.setCenter(new GLatLng(34.04818, -118.25321), 14);
     
      marker = new GMarker(new GLatLng(34.04818, -118.25321));
      map.addOverlay(marker);
      bounds.extend(marker.getPoint());
      marker = new GMarker(new GLatLng(34.05818, -118.25261));
      map.addOverlay(marker);
      bounds.extend(marker.getPoint());
    marker = new GMarker(new GLatLng(34.04898, -118.25421));
    map.addOverlay(marker);
    bounds.extend(marker.getPoint());
      marker = new GMarker(new GLatLng(34.04618, -118.25521));
      map.addOverlay(marker);
      bounds.extend(marker.getPoint());
     
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
    }
  }


send to a friend del.icio.us Digg reddit StumbleUpon

Comments

  • douglaskarr said on Aug 15, 2008....
    This can be done easier and dynamically with:
    var bounds = new GLatLngBounds;
    for (var i=0; i<markers.length; i++) {
    bounds.extend(markers[i].point);
    }
    map.setZoom(map.getBoundsZoomLevel(bounds));
    map.setCenter(bounds.getCenter());
  • jay said on Aug 20, 2008....
    that'll shave off a few lines :)
  • keins said on Jan 15, 2009....
    KEINS: I used the above code (the one by jay) but my markers are hidden at north-west corner. Any suggestions will be greatly appreciated.
  • jay said on Mar 02, 2009....
    I'm still using code very similar to this and it's working fine for me. Can you give some more details about your problem?
  • dsg138 said on Mar 25, 2009....
    Jay/Doug, I'm having the exact some issue... But instead of listing my markers, the markers are being dynamically generated in a for loop from a mysql query. I experimented with both sets of code above, and I can't get it quite right. I'm probably not putting your code in the right spots. Would either of you be willing to take a look at my code and see where those lines belong? Thanks in advance... -Dan
  • jay said on Mar 25, 2009....
    feel free to send me a private message on here and I'll take a look. Paste your code into http://gist.github.com/ if you don't mind. Makes it a lot easier to talk about.
  • magaly57 said on Sep 08, 2009....
    hi dsg138. I need to show in a map the markers from mysql but I dont know how to do that. A little help please. Sorry about my english, I am from Nicaragua and we speak spanish. Thanks.

Comment on "google maps api - dynamically selecting zoom and center point"


(Separate tags using commas, for example: New York, dating, vegetarian)
Comment Anonymously