Question

All,
I’m getting a couple points to create some markers in my data map. Here is my code to display the map:

var map;
var icon0;
var newpoints = new Array();

function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func
} else { 
    window.onload = function() {
        oldonload();
        func();
    }
}
}

addLoadEvent(loadMap);

function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( <?php echo $_SESSION['pav_event_latitude']; ?>, <?php echo $_SESSION['pav_event_longitude']; ?>), 12);
map.setMapType(G_NORMAL_MAP);

icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);

addPoints(myStores);
}

function addPoints( points )
{   
for ( var p = 0; p < points.length; ++p )
{
    var pointData = points[p];
    if ( pointData == null ) return; 
    var point = new GLatLng( pointData.latitude, pointData.longitude );
var marker = createMarker( point, icon0, pointData.html );
map.addOverlay( marker );
}
}

function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(popuphtml);
});

function Store( lat, long, text )
{
this.latitude = lat;
this.longitude = long;
this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];

What I would like to do is basically get the average of all of the points created so that can be the center of my map so it shows all of my points in the map instead of just a couple of them sometimes. Has anyone ever done something like this?

Thanks for any help in advance!

Answer 1

I guess you are looking for google.maps.Map.fitBounds()

This should work:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  </script> 
<script  type="text/javascript">
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func
} else { 
    window.onload = function() {
        oldonload();
        func();
    }
}
}

var map,
    infowin=new google.maps.InfoWindow({content:'moin'});
function loadMap() 
{
  map = new google.maps.Map(
    document.getElementById('map'),
    {   
      zoom: 12,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      center:new google.maps.LatLng(<?php echo $_SESSION['pav_event_latitude']; ?>, 
                                    <?php echo $_SESSION['pav_event_longitude']; ?>)
    });

  addPoints(myStores);
}

function addPoints( points )
{  
  var bounds=new google.maps.LatLngBounds();
  for ( var p = 0; p < points.length; ++p )
  {
    var pointData = points[p];
    if ( pointData == null ) {map.fitBounds(bounds);return; }
    var point = new google.maps.LatLng( pointData.latitude, pointData.longitude );
    bounds.union(new google.maps.LatLngBounds(point));
    createMarker( point,  pointData.html );
  }
  map.fitBounds(bounds);

}

function createMarker(point,  popuphtml) 
{
  var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
  var marker = new google.maps.Marker(
    {
      position:point,
      map:map
    }
  );
  google.maps.event.addListener(marker, 'click', function() {
      infowin.setContent(popuphtml)
      infowin.open(map,marker);
    });

}
function Store( lat, long, text )
{
this.latitude = lat;
this.longitude = long;
this.html = text;
}



var myStores = [<?php echo $jsData;?>, null];
addLoadEvent(loadMap);
</script>