Edin Puzic Edin Puzic - 2 months ago 12
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

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>