Gmap zoom in and zoom out from outside button click. Suppose a situation where you need to control the zoom of gmap out side the map controller or if you want to zoom in or zoom out the map onload you can use the following code.

The following code  has the three situation

Zoom in

zoom out

onload zoom

<html><html>

<head> <title> Gmap zoom in and zoom out from outside button click</title>

</head>

<body>
<input type="button" id="zoom-in" value="Click to zoom in"/>

<input type="button" id="zoom-out" value="Click to zoom out"/> <span id="onloadzoom"> </span>

<div id="map_canvas" style="width:100%; height:80%"></div> </body>

<script>function myMap() {var mapProp= {   
 center:new google.maps.LatLng(20.5937,78.9629),    zoom:5,};
var map=new google.maps.Map(document.getElementById("map_canvas"),mapProp);}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=< Your API Key >&callback=myMap"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--  Onclick zoom in --><script>    $(document).ready(function(){   
     $("#zoom-in").click(function(){
$('.gmnoprint').children('div').find('[title="Zoom in"]').trigger('click');      
     });   
 });  
</script> 
 
  <!--  Onclick zoom out -->  <script>    
$(document).ready(function(){    
    $("#zoom-out").click(function(){
$('.gmnoprint').children('div').find('[title="Zoom out"]').trigger('click');  
         });   
 }); 
 </script>  
  <!--  Onload zoom in --> 
 <script>    
$(document).ready(function(){    
   $('#zoom-in').attr('disabled',true); 
   $('#zoom-out').attr('disabled',true);  
  $('#onloadzoom').text('Onlod zoom in is on progress in ').css('color','red');   
     setTimeout(function(){  
    $('.gmnoprint').children('div').find('[title="Zoom in"]').trigger('click'); 
$('.gmnoprint').children('div').find('[title="Zoom in"]').trigger('click');
 $('.gmnoprint').children('div').find('[title="Zoom in"]').trigger('click');
 $('.gmnoprint').children('div').find('[title="Zoom in"]').trigger('click');
 $('#onloadzoom').text(''); 
$('#zoom-in').attr('disabled',false); 
$('#zoom-out').attr('disabled',false);

},    3000);
});  </script>

</body>

Leave comment

Your email address will not be published. Required fields are marked with *.