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

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

LVL 1
g118481Asked:
Who is Participating?
 
SnowFlakeConnect With a Mentor Commented:
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

0
 
SnowFlakeCommented:
did you try an alert showing the newZoomLevel ? to see that you are getting it in the event ?
0
 
g118481Author Commented:
How do I do that?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
SnowFlakeCommented:
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  
0
 
g118481Author 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?
0
 
SnowFlakeCommented:
could you please post a link or fully working code of you page ?
0
 
SnowFlakeCommented:
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

0
 
g118481Author 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

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

map.addControl(new GSmallZoomControl());
0
 
g118481Author 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

0
 
SnowFlakeCommented:
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

0
 
g118481Author 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?
0
 
g118481Author Commented:
Great!
It is working now.
Thanks
0
 
g118481Author Commented:
Great solution.
0
 
SnowFlakeCommented:
your welcome
0
All Courses

From novice to tech pro — start learning today.