如何设置谷歌 Map 的中心和缩放以覆盖从 Wordpress 数据库生成的所有标记

Question

I've managed to cobble together a script that pulls lat/long & names for markers from a MySQL database, this is via Wordpress WPDB get_results query.

The data is then parsed via JSON and the markers are added to the map. This works fine and the markers get added to the map.

However, I'm also trying to auto-center and auto-zoom to fit all the markers into the field of view, this part of the code doesn't seem to work, it just sets the map center to 0.0,0.0.

Does anybody know where I'm going wrong? I've taken a look at many of the other questions on here and tried for hours to tweak this to get it to work with little success.

Any help would be greatly appreciated, thanks!

        <?php
        global $wpdb;
        $data = $wpdb->get_results( 
        "
        SELECT marker_name, marker_lat, marker_long 
        FROM rwc_web_gurus
        WHERE var_type = 'marker' 
        "
        );
    ?>
    <div id="map"></div>
    <script type='text/javascript'>
     function initMap() {

        var latlng = new google.maps.LatLng(<?php echo $focuslatcurrent; ?>, <?php echo $focuslongcurrent; ?>); // default location
        var myOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
        };

        //INITIALISE MAP MARKERS
        var map = new google.maps.Map(document.getElementById('map'),myOptions);
        var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
        var json=JSON.parse('<?php echo(json_encode($data));?>');
        for( var o in json ){

            lat =json[ o ].marker_lat;
            lng=json[ o ].marker_long;
            name=json[ o ].marker_name;

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                name:name,
                map: map
            }); 

            // extend bounds
            var bounds = new google.maps.LatLngBounds();
            for(i=0;i<marker.length;i++) {
               bounds.extend(marker[i].getPosition());
            }


            //set center and zoom
            google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
              this.setZoom(map.getZoom()-1);

              if (this.getZoom() > 15) {
                this.setZoom(15);
              }
            });
            map.fitBounds(bounds);

            google.maps.event.addListener( marker, 'click', function(e){
                infowindow.setContent( this.name );
                infowindow.open( map, this );
            }.bind( marker ) );
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<?php echo $apikeycurrent; ?>&callback=initMap">
    </script>

Answer 1

You should define bounds object and call fitBounds() outside of the for loop, because currently you define new instance of bounds and apply fitBounds() on each iteration.

Do it this way

//INITIALISE MAP MARKERS
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse('<?php echo(json_encode($data));?>');
var bounds = new google.maps.LatLngBounds();
for( var o in json ){
    lat =json[ o ].marker_lat;
    lng=json[ o ].marker_long;
    name=json[ o ].marker_name;

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 

    // extend bounds
    bounds.extend(marker.getPosition());

    //set center and zoom
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        this.setZoom(map.getZoom()-1);

        if (this.getZoom() > 15) {
            this.setZoom(15);
        }
    });

    google.maps.event.addListener( marker, 'click', function(e){
            infowindow.setContent( this.name );
            infowindow.open( map, this );
    }.bind( marker ));
} 
map.fitBounds(bounds);

I hope this helps!