How to set the Google Map zoom level to show all the markers and user at center?

Question

I am creating a transport app where user can click on various drivers to choose fro them.

I am placing different drivers from database:

function multimarker(map) {
    jQuery.ajax({
        url: baseurl + "getdriverlocation.php",

        async: true,
        success: function (data) {
            var myArray = jQuery.parseJSON(data); // instead of JSON.parse(data)

            jQuery(myArray).each(function (index, element) {
                driverlat = element.driver_lat;
                driverlng = element.driver_lng;
                loginid = element.loginid;
                locations.push([driverlat, driverlng, loginid])
            });

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

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

                var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
                if (google.maps.geometry.spherical.computeDistanceBetween(latlng1, map.getCenter()) < 30000) {
                    drivermarker = new google.maps.Marker({
                        position: latlng1
                    });
                    drivermarker.setMap(map);

                    google.maps.event.addListener(drivermarker, 'click', (function (drivermarker, i) {
                        return function () {
                            driverdetail(locations[i][2]);
                        }
                    })(drivermarker, i));
                    bounds1.extend(latlng1);
                    map.fitBounds(bounds1);
                }
            }
        }
    });
}

and set the user to current position:

function currentpostionmap() {
    $(document).on("pageshow", "#inside123", function () {
         
        if (navigator.geolocation) {
                    
            function success(pos) {            
                userClat = pos.coords.latitude;
                userClng = pos.coords.longitude;
                var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
                var myOptions = {            
                    zoom: 15,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP        
                };        
                map = new google.maps.Map(document.getElementById("map"), myOptions);      
                var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                marker = new google.maps.Marker({            
                    position: latlng,
                    map: map,
                    icon: image123                
                });
                var infowindow1 = new google.maps.InfoWindow();

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow1.setContent('YOU');
                        infowindow1.open(map, marker);
                        map.setZoom(20);
                        map.setCenter(marker.getPosition());

                    }
                })(marker));
                multimarker(map);
            }        
            function fail(error) {          
                var latlng = new google.maps.LatLng(18.5204, 73.8567); 
                var myOptions = {            
                    zoom: 10,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP        
                };        
                map = new google.maps.Map(document.getElementById("map"), myOptions);             
                marker = new google.maps.Marker({            
                    position: latlng,
                                map: map                   
                });
            }       
            navigator.geolocation.getCurrentPosition(success, fail, {
                maximumAge: 500000,
                enableHighAccuracy: true,
                timeout: 6000
            });    
        }
    });
} 

How can I set the user to the center and set the map in such a way that all the markers in different position can be viewed with user at center?

Note : With the present code I am facing an issue that if driver is far from user than only driver can be viewed at center. User have to drag the map to see them their position.

Answer 1

You need to do a multi step process.

1. add all the markers and the "user" position to a google.maps.LatLngBounds object
2. fit the map to that bounds.
3. set the map center to be the location of the user.
4. verify that all the markers are still in view (the current map bounds contains the calculated bounds), if not zoom out one time.

code snippet :

 var geocoder; var map; var locations = [ [-33.890542, 151.274856, 'Bondi Beach'], [-33.923036, 151.259052, 'Coogee Beach'], [-34.028249, 151.157507, 'Cronulla Beach'], [-33.80010128657071, 151.28747820854187, 'Manly Beach'], [-33.950198, 151.259302, 'Maroubra Beach'] ] function initialize() { var pos = { coords: { latitude: -33.42502, //-33.8674869, longitude: 151.3422193 // 151.2069902 } } userClat = pos.coords.latitude; userClng = pos.coords.longitude; var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; // var bounds = new google.maps.LatLngBounds(); marker = new google.maps.Marker({ position: latlng, map: map, icon: image123 }); var infowindow1 = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow1.setContent('YOU'); infowindow1.open(map, marker); map.setZoom(20); map.setCenter(marker.getPosition()); } })(marker)); multimarker(map, latlng, infowindow1); } function multimarker(map, userloc, infowindow) { var bounds1 = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]); // if (google.maps.geometry.spherical.computeDistanceBetween(latlng1, map.getCenter()) < 30000) { drivermarker = new google.maps.Marker({ position: latlng1, icon: "http://maps.google.com/mapfiles/ms/micons/blue.png", map: map }); drivermarker.setMap(map); google.maps.event.addListener(drivermarker, 'click', (function(marker, i) { return function(evt) { infowindow.setContent(locations[i][2]); infowindow.open(map, marker); } })(drivermarker, i)); bounds1.extend(latlng1); map.fitBounds(bounds1); // } } bounds1.extend(userloc); map.fitBounds(bounds1); // wait for the bounds change to happen google.maps.event.addListenerOnce(map, 'bounds_changed', function() { // set the center on the user map.setCenter(userloc); // wait for the center to change google.maps.event.addListenerOnce(map, 'bounds_changed', function() { // check to see if all the markers are still in bounds if ((!map.getBounds().contains(bounds1.getNorthEast())) || (!map.getBounds().contains(bounds1.getSouthWest()))) { // if not zoom out one level console.log(map.getZoom() + " zoom-1 will be " + (map.getZoom() - 1)); map.setZoom(map.getZoom() - 1); } }); }); } google.maps.event.addDomListener(window, "load", initialize); 

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

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