zoomin and zoomout tool option

Question

I am creating javascript web application using google maps. i am trying to create a tool for zoomin and zoomout option.i created two buttons for zoomin and zoomout, now i am trying to activate the tools. while i am using this tool for zoomin and zoomout option then it will zoomin and out operations on map. I am trying this code

<button name="button" value="" type="button" id="zoomin" onclick="document.getElementById('mapviewer').change(); clicked"></button>
 <div id="mapviewer">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>    
function initialize() {
         var mapOptions = {
         zoom: 4,
         center: new google.maps.LatLng(-33, 151),
         mapTypeControl: true,
         mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DEFAULT,
              mapTypeIds: [
                              google.maps.MapTypeId.ROADMAP,
                              google.maps.MapTypeId.TERRAIN
                            ]
                          },
                          zoomControl: false,
                          zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.SMALL
                          }
                        };
                        var map = new google.maps.Map(document.getElementById('mapviewer'),
                                                      mapOptions);
                        map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});                              
                      }

                      google.maps.event.addDomListener(window, 'load', initialize);
                       </script>    

                         <script type="text/javascript">
                            function performClick(elemId) {
                               var elem = document.getElementById(elemId);
                               if(elem && document.createEvent) {
                                  var evt = document.createEvent("MouseEvents");
                                  evt.initEvent("click", true, false);
                                  elem.dispatchEvent(evt);
                               }
                            }
                         </script>
                         </div>

using this page as reference [blog]: How to add the pan tool within the iframe?

Now i am trying to write a script for zoomin option and if i click the button then the select arrow changed to zoom icon and it will zoom in the google map.Please provide me some code reference for this task

Answer 1

Map Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../include.css" />
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Textual Zoom Control (Maps API v3)</title>
<style type="text/css">

html, body { height:100%; width: 100%; }

#map {
 float: left;
 margin: 0 25px 10px 14px;
 width: 64%;
 height: 70%;
 border: 1px solid gray;
}

#desc {
 float: left;
 margin: 0 25px 10px 20px;
 width: 14em;
}

#zoomcontrol {
 position: absolute;
 top:172px; left:71%;
}

@media screen and (max-width: 890px) {

 body, html, #map {
   margin: 0;
 }

 #map {
  width: 100%;
  height: 50%;
 }
 #desc {
  margin: 0 14px;
  width: 93%;
 }
 .include >b {
  float: right;
  margin-top: 17px;
 }
 #zoomcontrol {
  position: absolute;
  top: 70%;
  left: 41%;
 }
}

</style>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j
s"></script>
<![endif]-->

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;sensor=false">
</script>
<script type="text/javascript">

/* A TextualZoomControl is a GControl that displays
 * textual "Zoom In" and "Zoom Out" buttons.
*/
function TextualZoomControl(map) {

/* Creates a one DIV for each of the buttons and places them in a container
 * DIV which is returned as our control element. We add the control
 * to the map container and return the element for the map class to
 * position properly.
*/

  var g = google.maps;
  var control = document.createElement("div");
  control.id = "zoomcontrol";
  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  control.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));

  g.event.addDomListener(zoomInDiv, "click", function() {
    map.setZoom(map.getZoom()+1);
   });

   var zoomOutDiv = document.createElement("div");
   this.setButtonStyle_(zoomOutDiv);
   control.appendChild(zoomOutDiv);
   zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));

   g.event.addDomListener(zoomOutDiv, "click", function() {
     map.setZoom(map.getZoom()-1);
    });

   /* Instead of appending it to the map container
    * append it to body of the document
   */
   document.body.appendChild(control);
   return control;
}


// Set the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.fontSize = "smaller";
  button.style.border = "1px solid gray";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}


function loadMap() {

  var g = google.maps;
  var opts_map = {
    zoom: 10,
    center: new g.LatLng(53.55486, 9.98989),
    disableDefaultUI: true,
    scrollwheel: false,
    mapTypeControl: true,

   mapTypeControlOptions: {
     style: g.MapTypeControlStyle.DEFAULT
   },
   mapTypeId: g.MapTypeId.ROADMAP      
  };

  var map = new g.Map(document.getElementById("map"), opts_map);

  // Add self created control
  var zoom_control = new TextualZoomControl(map); 
  zoom_control.index = 1;
}
window.onload = loadMap;
</script>
</head>
<body>
<h3>Textual Zoom Control</h3>
<div id="map"></div>
</body>
</html>

This code will work for zoom in and zoom out tool option using click button

zoomin and zoomout tool option

Question

1 answers

solution1
1 ACCPTED 2015-07-13 11:23:40

zoomin and zoomout tool option

Question

1 answers

solution1 1 ACCPTED 2015-07-13 11:23:40

solution1
1 ACCPTED 2015-07-13 11:23:40