Google Maps API Test

Zoom in Zoom Out Google Maps API from external Controls DEMO

by Abid Shaik

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=drawing&amp;bogusParam=.js"></script>
<!-- Zoom in Zoom Out Google Maps API from external Controls DEMO --> 

    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }

JavaScript

$(document).ready(function(){

initialize(); 

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}

  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}

  });

}
var map;

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 * @constructor
 */

function initialize() {

var myStyles =[
    {
    /*Make All POIs Clickable links OFF*/
        featureType: "all",
        elementType: "labels.icon",
        stylers: [
              { visibility: "off" }
        ]
    },
    {
    /*Make All POIs Clickable links OFF*/
        featureType: "poi",
        elementType: "labels",
        stylers: [
              { visibility: "off" }
        ]
    }
];


  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(35.777043,-78.635422),
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: myStyles
  }
  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);    
});