Edin Puzic Edin Puzic - 8 months ago 52
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



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>