javascript - Google Maps API: forcing zoom in to a specific location -

i'm quite new google maps api , wondering if there way force zoom in specific location, example: us.

what i'm looking way simulate kind of zooming in effect of mouse scrolling wheel, if cursor in us, when zoom in scrolling wheel, center start moving towards cursor.

i tried using 'zoom_changed' event , changing center dynamically, since not running in desktop (device mode), event triggered @ end (source).

here code:

var map; var centerus; var currentcenter; var currentzoom;  function initmap() {     //define map     map = new google.maps.map(document.getelementbyid('map'), {         center: {lat: 0, lng: 0},         zoom: 3,         disabledefaultui: true     });      //limit zoom     map.setoptions({ minzoom: 3, maxzoom: 10 });      //initialization of variables     currentzoom = map.getzoom();     currentcenter = map.getcenter();     centerus = new google.maps.latlng(40, -100);      //add listener zooming in     map.addlistener('zoom_changed', function () {         zoomintheus();     }); }  function zoomintheus() {      //get new values     var newzoom = map.getzoom();     currentcenter = map.getcenter();      //if user zooming in     if (newzoom > currentzoom) {          //difference between current center , center of         var changelat = centerus.lat() - currentcenter.lat();         var changelng = centerus.lng() - currentcenter.lng();          //approach center of factor of 10% of distance         var newlat = currentcenter.lat() + changelat * 0.1;         var newlng = currentcenter.lng() + changelng * 0.1;          //define new center , pan         var newcenter = new google.maps.latlng(newlat, newlng);         map.panto(newcenter);     }      //actualize value of currentzoom     currentzoom = newzoom; } 

i tried during 'drag' event because triggered repeatedly, doesn't work. think may because event triggered , newzoom , currentzoom variable have same value. or maybe, on device mode, zoom variable google maps api refreshed @ end of event. assuming, not know.

is there way achieve want? thought of disabling panning when 2 fingers detected or maybe changing device mode non-device mode, haven't found it.

thank in advance.

you try locate own location first , auto-zoom location. https://stackoverflow.com/a/20930874/7707749

i made here example how can zoom location wish zoom in for:

function getplaces(query) {  	service = new google.maps.places.placesservice(  	  document.getelementbyid('attributions') //attributions-container  	);    	//send query  	service.textsearch({query:query}, function(results, status) {  		if (status == google.maps.places.placesservicestatus.ok) {  			for (var = 0; < results.length; i++) {            				addmapmarker(results[i], i);  			}  			  			map.fitbounds(mappointsbounds);  		}  	});  }      function addmapmarker(markerinfo, i) {    	var infowindow = new google.maps.infowindow(), marker;  	var service = new google.maps.places.placesservice(map);  	  	var marker;  	  	//this marker created position , animation  	marker = new google.maps.marker({  		animation: google.maps.animation.drop,  		position:  markerinfo.geometry.location,  		map: map,              markerinfo: markerinfo  	});  	  	allmarkers.push(marker); //keeping markers in array      	mappointsbounds.extend(markerinfo.geometry.location); //extend bounds contain marker  	  	google.maps.event.addlistener(marker, 'click', (function(marker, i) {  		return function() {  			infowindow.setcontent('<div>this marker:' + marker + '</div>');  			infowindow.open(map, marker);  		}  	})(marker, i));  }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <img src="http://developers.google.com/places/documentation/images/powered-by-google-on-white.png"/>    <input id="searchtextfield" type="text" size="50" placeholder="enter location" autocomplete="on" runat="server" onchange="initmap(this.value)"/>    		  <ul id="results"></ul>    <div id="attributions" style="background:#f1f1f1"> you'll see here attributions when there </div>  		  <div id="map"></div>      <script src="https://maps.googleapis.com/maps/api/js?&libraries=places" async defer></script>  <script>      var startlatlng, //change value near map end  	allmarkers = [], //keep global copy of markers  	mappointsbounds = [], //map bounds of markers  	map; //copy of map    	//google call when it's ready, it's query string in script tag above `&callback=initmap`:      function initmap(query) {          startlatlng = new google.maps.latlng([0, 0]);  	mappointsbounds = new google.maps.latlngbounds();    	map = new google.maps.map(document.getelementbyid('map'), {          center: startlatlng,  		zoom: 13  	});  				  	getplaces(query);      }  </script>