Edin Puzic Edin Puzic - 1 year ago 85
jQuery Question

Zoom google maps using Input range

Hi how to zoom in or zoom out google maps using input type range?

here is my input type range

<input class="form-control" id="range" type="range" min="10" max="500" value="50" step="10">


There is all code with google map API

https://jsfiddle.net/rpsycm3j/

Answer Source

var map; // Make accessible

function map__Init(){
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(51.5, -0.2), 
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}

function map__SetZoom() {
   map.setZoom( +this.value );
}

google.maps.event.addDomListener(window, "load", map__Init);
document.querySelector("#zoom").addEventListener("input", map__SetZoom);
<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<input id="zoom" type="range" min="0" max="20" value="5" step="1">
<div id="map" style="height: 400px;"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download