We help IT Professionals succeed at work.

My script for limiting zoom-in and zoom-out not working...Help!

g118481
g118481 asked
on
Medium Priority
796 Views
Last Modified: 2012-05-05
Can someone take a look at my code and help?
I have a javascript that calls the Google Maps API.
That part is working perfect.
However, for privacy purposes I need to limit the zoom-in and zoom-out capabilities of the map.
I have found an example and included it into my code, but for some reason it does not work.  
I do not get an error, it just does not see the zoom limitations.
I need this by tomorrow, please help.
if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";
    
      // arrays to hold copies of the markers used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var i = 0;
 
      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallZoomControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(27.981569, -82.300104), 11);
 
// BEGIN ZOOM-IN ZOOM-OUT  	  	  
	  GEvent.addListener(map, "zoom", function(oldZoomLevel, newZoomLevel) {
        if(newZoomLevel < 6)
             {
             map.zoomTo(6);} 
        if(newZoomLevel > 7)
	                  {
             map.zoomTo(7);} 
        
       }); 
// END ZOOM-IN ZOOM-OUT  
	  
	  // Read the data from xml
      var request = GXmlHttp.create();
      request.open("GET", "outages.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }
 
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

Open in new window

Comment
Watch Question

did you try an alert showing the newZoomLevel ? to see that you are getting it in the event ?

Author

Commented:
How do I do that?
change
// BEGIN ZOOM-IN ZOOM-OUT                  
        GEvent.addListener(map, "zoom", function(oldZoomLevel, newZoomLevel) {
        if(newZoomLevel < 6)
             {
             map.zoomTo(6);}
        if(newZoomLevel > 7)
                        {
             map.zoomTo(7);}
       
       });
// END ZOOM-IN ZOOM-OUT  


to

// BEGIN ZOOM-IN ZOOM-OUT                  
        GEvent.addListener(map, "zoom", function(oldZoomLevel, newZoomLevel) {
        alert('zoom event: zoom about to change from ' +  oldZoomLevel + ' to ' +newZoomLevel);

        if(newZoomLevel < 6)
             {
             map.zoomTo(6);}
        if(newZoomLevel > 7)
                        {
             map.zoomTo(7);}
       
       });
// END ZOOM-IN ZOOM-OUT  

Author

Commented:
Ok,

I added the alert to the code.
No alert shows up when I change the zoom, so I believe it is not getting it into the event.

Where do I go from here?
could you please post a link or fully working code of you page ?
o.k.
your map is a GMap2 and the zoom event is only supported on GMap
you should use the zoomend evend instead.

haev a look here:
http://econym.googlepages.com/gevent.htm

SnowFlake
//chage 
GEvent.addListener(map, "zoom", function(oldZoomLevel, newZoomLevel) 
to
GEvent.addListener(map, "zoomend", function(oldZoomLevel, newZoomLevel) 

Open in new window

Author

Commented:
I have attached my code snippet.
This control adds the zoom-in/zoom-out  control to the map, which is what I am trying to limit.

 map.addControl(new GMapTypeControl());

This map pulls in the data from an xml file, for which I have placed at the bottom of the code snippet.

So frustrating, it is like the zoom code is just ignored.
Thanks for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Map</title>
	
	<!--- You will need to insert your own google key --->
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">
 
    <!-- you can use tables or divs for the overall layout -->
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>
     
 
    <script type="text/javascript">
    //
 
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";
    
      // arrays to hold copies of the markers used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var i = 0;
 
      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(27.981569, -82.300104), 10);
  	  
	    
// BEGIN ZOOM-IN ZOOM-OUT                  
        GEvent.addListener(map, "zoom", function(oldZoomLevel, newZoomLevel) {
        alert('zoom event: zoom about to change from ' +  oldZoomLevel + ' to ' +newZoomLevel);
 
        if(newZoomLevel < 6)
             {
             map.zoomTo(6);} 
        if(newZoomLevel > 7)
                        {
             map.zoomTo(7);} 
        
       }); 
// END ZOOM-IN ZOOM-OUT  
 
	  
	  // Read the data from xml
      var request = GXmlHttp.create();
      request.open("GET", "outages.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }
 
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    
    </script>
  </body>
 
</html>
 
 
////////////////////// xml document here ////////////////////////////////////////
<?xml version="1.0"?>
<markers>
<marker  lat="27.95007" html="Some text description goes here." lng="-82.458504" label="TAMPA"  />
<marker  lat="27.94017" html="Some text description goes here." lng="-82.325474" label="BRANDON"  />
<marker  lat="27.89402" html="Some text description goes here." lng="-81.973124" label="MULBERRY"  />
<marker  lat="27.979702" html="Some text description goes here." lng="-82.306435" label="MANGO"  />
<marker  lat="28.15227" html="Some text description goes here." lng="-82.461514" label="LUTZ"  />
</markers>

Open in new window

Author

Commented:
Sorry, one change.
My last entry should have listed this control.

map.addControl(new GSmallZoomControl());

Author

Commented:
I made the change you suggested above.  

//change
GEvent.addListener(map, "zoom", function(oldZoomLevel, newZoomLevel)
to
GEvent.addListener(map, "zoomend", function(oldZoomLevel, newZoomLevel)

I now get the alert to come up when the zoom changes.
Howerver, the restricted zoom levels do not happen.
Do I have the conditional below, correct?
// BEGIN ZOOM-IN ZOOM-OUT     
GEvent.addListener(map, "zoomend", function(oldZoomLevel, newZoomLevel) {            
               alert('zoom event: zoom about to change from ' +  oldZoomLevel + ' to ' +newZoomLevel);
 
        if(newZoomLevel < 10)
             {
             map.zoomTo(10);} 
        if(newZoomLevel > 7)
                        {
             map.zoomTo(7);} 
        
       }); 
// END ZOOM-IN ZOOM-OUT  

Open in new window

what you are sayin in your condition is:
if the new zoom level is less then 10 then set it to 10 and if its over 7 then set it to 7
this will result in all zoom levels becoming 7

so you should you the following:

SnowFlake
    if(newZoomLevel > 10) {
             map.zoomTo(10);
   } 
    if(newZoomLevel < 7) {
             map.zoomTo(7);
    } 

Open in new window

Author

Commented:
I changed it to your suggestion above, but it still does not limit the zoom.
The alert still comes up, though.
Is the conditional statement correct?
this is yet again because you have GMap v1 code running on GMap2 object

read
http://code.google.com/apis/maps/documentation/upgrade.html

you should use
        if(newZoomLevel < 7)
             {
             map.setZoom(7);
			 } 
        if(newZoomLevel > 10) {
             map.setZoom(10);
		} 

Open in new window

Author

Commented:
Great!
It is working now.
Thanks

Author

Commented:
Great solution.
your welcome

Explore More ContentExplore courses, solutions, and other research materials related to this topic.