asked on

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

SnowFlake

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

g118481

ASKER

How do I do that?

SnowFlake

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

g118481

ASKER

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?

SnowFlake

could you please post a link or fully working code of you page ?

SnowFlake

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

g118481

ASKER

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

g118481

ASKER

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

map.addControl(new GSmallZoomControl());

g118481

ASKER

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

SnowFlake

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

g118481

ASKER

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?

ASKER CERTIFIED SOLUTION

SnowFlake

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

g118481

ASKER

Great!
It is working now.
Thanks

g118481

ASKER

Great solution.

SnowFlake

your welcome