javascript - Google maps API center and zoom multiple markers

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?

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?

Share Improve this question edited May 23, 2017 at 12:33 CommunityBot 11 silver badge asked Oct 7, 2015 at 8:20 The Sumo 6471 gold badge8 silver badges20 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You need to do exactly what is remended 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./mapfiles/ms/micons/blue.png'],
  ['Bondi Beach', -33.890542, 151.274856, 'http://maps.google./mapfiles/ms/micons/blue.png'],
  ['Coogee Beach', -33.923036, 151.259052, 'http://maps.google./mapfiles/ms/micons/blue.png'],
  ['Cronulla Beach', -34.028249, 151.157507, 'http://maps.google./mapfiles/ms/micons/blue.png'],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 'http://maps.google./mapfiles/ms/micons/blue.png'],
  ['Maroubra Beach', -33.950198, 151.259302, 'http://maps.google./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./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-result"></div>

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./maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map" style="width: 640px; height: 480px;"></div>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745351561a4623863.html

javascript - Google maps API center and zoom multiple markers - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Google maps API center and zoom multiple markers - Stack Overflow

2 Answers 2

相关推荐