Edin Puzic Edin Puzic - 1 year ago 91
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


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