How to set google map custom zoom level dynamicall

Question

I am working with google map. According to requirements i need to set different zoom level that is dependent to my search query.If there are multiple location on the map in country then map should focus the country. Other scenario is , if there are different locations marked in a city then map should be focused to city level.

Answer 1

After you perform the search, once you have the locations, you can use bounds.extend and map.fitBounds so the map automatically zooms to show all the pins returned by your search, like this:

    //places is an array that contains the search result
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      //pass the location of each place to bounds.extend
      bounds.extend(place.geometry.location);
    }
    //tell your map to sets the viewport to contain all the places.
    map.fitBounds(bounds);

On the other hand, if you do a search for a zone like zip code, city or country using the geo coder, you can also use map.fitBounds to set the viewport to show the entire specific zone that was returned by the geo coder, like this:

//response is the geocoder's response
map.fitBounds(response[0].geometry.viewport);

Here's a codepen with the geocoder example https://codepen.io/jaireina/pen/gLjEqY

Answer 2

var geoCoder = new GClientGeocoder();
geoCoder.setViewport(map.getBounds());
geoCoder.getLocations('searchquery', function(latlng) {
  if( latlng.Placemark.length > 0 ) {
    var box = latlng.Placemark[0].ExtendedData.LatLonBox;
    var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));
    var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);
    var zoom = oMap.getBoundsZoomLevel(bounds);
    map.setCenter(center, zoom);
  }
});

I think the key part of this for you is

//box is a LatLonBox with the size of your resultquery. You can create this yourself as well
var box = latlng.Placemark[0].ExtendedData.LatLonBox;

//bounds are the bounds of the box
var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));

//center is the center of the box, you want this as the center of your screen
var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);

//zoom is the zoomlevel you need for all this
var zoom = oMap.getBoundsZoomLevel(bounds);

//the actual action
map.setCenter(center, zoom);

Answer 3

I found following article very helpful. using code sample code I can able to achieveenter link description here this.

I tried the code in drupal and it is working.