Google map Zoomed fully

Question

Hi in my google map i just draw a one marker when map loads.But then map is zoomed fully in which is really confusing. but when i draw more than one markers map is centered properly and zoomed to a certain level. how can it overcome this. i have got a loop inside my draw markers function and in that i get only one object that has coordinates. when i get more than one objects from 'markers' map is centered properly. but when it has a only one object to loop. markers gets drawn but map is not well centered and zoomed(zoomed in fully)

function drawMarkers(markerList) {
                    debugger;

                        var mapOptions = {
                            center: new google.maps.LatLng(-24.504710, 134.039231),
                            zoom: 4,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var currentLocation;
                        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                        var infoWindow = new google.maps.InfoWindow();

                        var lat_lng = new Array();
                        var latlngbounds = new google.maps.LatLngBounds();
                        for (i = 0; i < markers.length; i++) {
                            //if (markerList[i].Longitude > 0) {
                            var data = markerList[i]
                            var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                            lat_lng.push(myLatlng);


                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: data.DriverName,

                            });

                            var driverCurrentLocation = document.getElementById('<%= hdfDriverCurrentLocation.ClientID %>').value;

                            latlngbounds.extend(marker.position);
                            //if (markerList[i].Longitude > 0) {
                            (function (marker, data) {
                                google.maps.event.addListener(marker, "click", function (e) {
                                    debugger;
                                    var lat = data.Latitude;
                                    var lng = data.Longitude;
                                    var latlng = new google.maps.LatLng(lat, lng);
                                    var geocoder = geocoder = new google.maps.Geocoder();
                                    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                                        if (status == google.maps.GeocoderStatus.OK) {
                                            if (results[1]) {
                                                currentLocation = results[1].formatted_address;
                                            }
                                            infoWindow.setContent('<div style="overflow: auto;width: 275px;">' +
                                       '<div id="leftSideMainDiv" class="col25" style="padding-Left:0px; width:22%;">' +
                                       '<div class="col100"><img src="../Images/DriverImages/driver_icon.jpg" height="60" width="60"/></div>' +

                                       '</div>' +

                                       '<div id="RightSideMainDiv" class="col75" style="width:72%;">' +
                                       '<div class="col100" style="font-weight:bold; padding-top:0px; padding-left:0px; font-size:smaller;"> ' + data.DriverName + '</div>' +
                                       '<div style="font-size:smaller; padding-top:15px;">Job Number :' + data.JobId + ' - ' + data.JobType + '</div>' +
                                       '<div style="font-size:smaller;">Delivery Address :' + data.DeliveryAddress + '</div>' +
                                       '<div style="font-size:smaller;">Current Location :' + currentLocation + '</div>' +
                                       '<div style="font-size:smaller;">Last Update :' + data.LastUpdatedTime + '</div>' +
                                       '</div>');

                                            infoWindow.open(map, marker);
                                        }
                                    });

                                });
                            })(marker, data);
                        //}
                            }
                        //}
                        map.setCenter(latlngbounds.getCenter());
                        map.fitBounds(latlngbounds);
                        map.setZoom(5);

                }

some code? You can easily control the zoom when loading the map. — A G, Apr 02 '15 at 08:34
possible duplicate of [How to set zoom level in google map](http://stackoverflow.com/questions/11454229/how-to-set-zoom-level-in-google-map) — mate64, Apr 02 '15 at 15:13

Manoz · Answer 1 · 2015-04-02T09:18:28.483

0

on the initialization of maps set the zoom level, Here the zoom is set to 5

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

     google.maps.event.addDomListener(window, 'load', function () {
              map.setZoom(5);
       });

Add the map variable outside of map's function scope

var map;

and then modify the line inside your map function-

map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

then after calling your map function drawMarkers(markerList) you need to set the zoom as-

$(document).ready(function(){
   drawMarkers(markerList)
    google.maps.event.addDomListener(window, 'load', function () {
            map.setZoom(5);
   });
});

Let me know if that works!

edited Apr 02 '15 at 09:18

answered Apr 02 '15 at 08:34

Manoz

6,507
13
68
114

@user3671284, How are you approaching this? I just tested it at my local – Manoz Apr 02 '15 at 09:00
When i put mapOptions and map var outside the function this 'document.getElementById("dvMap")' returns null – SINFER Apr 02 '15 at 09:57
no mapOptions doesn't need to be outside the scope. Also try setting id to `map_canvas` instead of `divMap` in case if you are only one instance of maps. Google maps have issues with different id(s) sometimes. – Manoz Apr 02 '15 at 10:08
follow this url as well- https://google-developers.appspot.com/maps/documentation/javascript/examples/place-search – Manoz Apr 02 '15 at 10:09
did you look at url ? I suspect you are missing a key thing then. – Manoz Apr 02 '15 at 10:48
Yes i did. thanks for that. Well may be. but i coudn't find it – SINFER Apr 02 '15 at 11:09

score 0 · Accepted Answer · edited May 23 '17 at 12:26

0

Related question: How to set zoom level in google map

If you only have one marker (markers.length == 1), then don't call map.fitBounds(). Change:

 map.setCenter(latlngbounds.getCenter());
 map.fitBounds(latlngbounds);
 map.setZoom(5);

To:

 map.setCenter(latlngbounds.getCenter());
 if (marker.length != 1) map.fitBounds(latlngbounds);
 map.setZoom(5);

edited May 23 '17 at 12:26

Community

1
1

answered Apr 02 '15 at 13:40

geocodezip

158,664
13
220
245

Google map Zoomed fully

2 Answers2