I am using Google Map to display multiple lat/long points.

But the Google map Javascript code has the code snippet to track the center of lat/long of the available lat/long.

<script type="text/javascript">
    var locations = JSON.parse('<?php echo json_encode($data);?>'); //alert (locations);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][2], locations[i][3]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][1]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
</script>

In Above code the line

center: new google.maps.LatLng(),

needs a lat/long pair which could be the center point of multiple lat/long to be displayed.

How could that be done?

I am using Google Map to display multiple lat/long points.

But the Google map Javascript code has the code snippet to track the center of lat/long of the available lat/long.

<script type="text/javascript">
    var locations = JSON.parse('<?php echo json_encode($data);?>'); //alert (locations);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][2], locations[i][3]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][1]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
</script>

In Above code the line

center: new google.maps.LatLng(),

needs a lat/long pair which could be the center point of multiple lat/long to be displayed.

How could that be done?

• javascript
• google-maps
• latitude-longitude

• If you lat/longs define an irregular polygon then there is no official defined 'centre'. See this: mathopenref./polygoncenter.html It states the centre as "The point inside a regular polygon that is equidistant from each vertex.". You will see later it says it can have a centroid. Here is a 7 step process for that. ehow./how_7209923_calculate-centroid-polygon.html - obviously wiki has some good stuff on this (en.wikipedia/wiki/Centroid) – CodeBeard Commented Aug 17, 2013 at 12:10
• Is (mean lat, mean long) not good enough? – Paul S. Commented Aug 17, 2013 at 12:35
• Exact same question was asked two weeks ago: stackoverflow./questions/18085275/… – acraig5075 Commented Aug 18, 2013 at 16:18

2 Answers 2

This works. See the documentation of Map.fitBounds and LatLngBounds for details:

<script type="text/javascript">
   var locations =  JSON.parse('<?php echo json_encode($data);?>');//alert (locations);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    var bounds = new google.maps.LatLngBounds();
     for (i = 0; i < locations.length; i++) {

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2],locations[i][3]),
        map: map
      });
      bounds.extend(marker.getPosition());

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][1]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    map.fitBounds(bounds);
  </script>

code snippet:

var locations = JSON.parse(
  JSON.stringify([
    ['AAA', 'BBB', 42, -72],
    ['BBB', 'CCC', 42.1, -72.2]
  ])); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][2], locations[i][3]),
    map: map
  });
  bounds.extend(marker.getPosition());

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][1]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
map.fitBounds(bounds);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis./maps/api/js"></script>
<div id="map"></div>

You should get the bounds of your added markers with the function map.getBounds().

It returns an object on which you can get the center bound.getCenter().

See Find center of multiple locations in Google Maps