Google maps API center and zoom multiple markers

Question

I know there are lots of questions answered on this subject but I can't get them to work with my code. I have used code from this question here but my javascript knowledge is limited and I can't work out where to put it to get it to work. I am using multiple locations which are dynamically added from a wp query and I want the map to automatically find the center of all the locations and preferable zoom to the extent of all the markers.

This is my code to generate the map:

var map = new google.maps.Map(document.getElementById('map-result'), {
              zoom: 6,
              center: new google.maps.LatLng(52.999085, -2.833751),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        var locations = [
        <?php
        $post_query = new WP_Query(array('posts_per_page' => 999, 'post_type' => 'surf-school', 'category_name' => $cat_name));
            if(!empty($post_query->posts)){

            foreach($post_query->posts as $post) { 
                $location_lat = get_post_meta($post->ID,'wp_gp_latitude',true);
                $location_long = get_post_meta($post->ID,'wp_gp_longitude',true);
                $the_post_type = get_post_type( get_the_ID() );

            ?>
                ['<a href="<?php the_permalink();?>"><?php the_title(); ?></a>', <?php echo $location_lat; ?>, <?php echo $location_long; ?>, '<?php echo home_url().'/wp-content/themes/blutek/images/beach-marker.png'; ?>'],

            <?php } }?>
        ];

        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][1], locations[i][2]),
            icon: locations[i][3],
            map: map
          });

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

And this is the code from the other answer which should center the map:

var bound = new google.maps.LatLngBounds();

for (i = 0; i < locations.length; i++) {
  bound.extend( new google.maps.LatLng(locations[i][2], locations[i][3]) );

  // OTHER CODE
}
console.log( bound.getCenter() 
);

Can anyone tell me where that code should go in my code?

geocodezip · Answer 1 · 2020-10-08T12:54:02.247

You need to do exactly what is recommended in your referenced question:

First you can create a LatLngBounds object by including all the dynamically generated locations. Use the extend method to include the points.

Then use the map.fitBounds method to center and zoom the map on the markers

proof of concept fiddle

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][1], locations[i][2]),
        icon: locations[i][3],
        map: map
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
map.fitBounds(bounds);

code snippet:

var map = new google.maps.Map(document.getElementById('map-result'), {
  zoom: 6,
  center: new google.maps.LatLng(52.999085, -2.833751),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var locations = [
  ['title', 42, -72, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Bondi Beach', -33.890542, 151.274856, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Coogee Beach', -33.923036, 151.259052, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Cronulla Beach', -34.028249, 151.157507, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Maroubra Beach', -33.950198, 151.259302, 'http://maps.google.com/mapfiles/ms/micons/blue.png']
];
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][1], locations[i][2]),
    icon: locations[i][3],
    map: map
  });
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
map.fitBounds(bounds);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-result"></div>

score 1 · Answer 2 · answered Oct 07 '15 at 12:56

Use fitBounds function:

var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
    bounds.extend(new google.maps.LatLng(locations[i][1], locations[i][2])); 
    //the remaining code for initializing markers goes here...        
}
map.fitBounds(bounds);  //Sets the viewport to contain the given bounds

Example

function initialize() {


    var locations = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        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++) {
        bounds.extend(new google.maps.LatLng(locations[i][1], locations[i][2]));
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

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

    map.fitBounds(bounds);    
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map" style="width: 640px; height: 480px;"></div>

Thanks guys! With a bit of fiddling I pretty much arrived at the same solution. — The Sumo, Oct 08 '15 at 14:50

Google maps API center and zoom multiple markers

2 Answers2