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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
g118481Author Commented:
Great!
It is working now.
Thanks
0
g118481Author Commented:
Great solution.
0
SnowFlakeCommented:
your welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.