Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Gmap zoom in and zoom out from outside button click

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 Continue Reading


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>
Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts