What's wrong with this api code?

Discussion in 'HTML & Website Design' started by dlatua, Nov 28, 2008.

  1. #1
    Can somebody help me to find out what's wrong with this google api code that's supposed to view a map and when the user check into a checkbox category, some markers appear for the specific category of places.
    When i didn't add the checkboxes but just the map and the markers of a hundred places, it was fine, but now..:confused: I don't know what's wrong!
    Here is the code:
    <!DOCTYPE html "-//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> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
        <title>Google Maps JavaScript API Example</title> 
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUb0gtzU21i1JH2hwcyWEUxQJDsRcqTGKDNynoP8JRNuLuX5d6BSy2dMGW9ncQIogPHCk09QYYeT6yg"&sensor=true" 
                type="text/javascript"></script> 
     
    <script type="text/javascript"> 
     
    //<![CDATA[	
     
       var gmarkers = []; 
     
       function createIcon(type){ 
        var srcImage = []; 
        srcImage["Institucione Shteterore"]= 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
        srcImage["Institucione Kulturore,Fetare dhe Sportive"]= 'http://labs.google.com/ridefinder/images/mm_20_green.png'; 
        srcImage["Institucione Arsimore"]= 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'; 
        srcImage["Institucione Financiare"]= 'http://labs.google.com/ridefinder/images/mm_20_brown.png'; 
        srcImage["Institucione Shendetsore"]= 'http://labs.google.com/ridefinder/images/mm_20_white.png'; 
        srcImage["Hoteleri-Turizem"]= 'http://labs.google.com/ridefinder/images/mm_20_red.png'; 
     
        var icon = new GIcon(); 
        icon.image = srcImage[type]; 
        icon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
        icon.iconSize = new GSize(12, 20); 
        icon.shadowSize = new GSize(22, 20); 
        icon.iconAnchor = new GPoint(6, 20); 
        icon.infoWindowAnchor = new GPoint(5, 1); 
        return icon; 
        } 
     
      function createMarker(point, name, foto, type, detaje) { 
          var icon = createIcon(type); 
          var marker = new GMarker(point, icon); 
          marker.mycategory = type; 
          marker.myname = name; 
          var html = "<b>" + name + "></b> <br/><img src='"+ foto +"' width='220' height='180'/><br/><i>"+ detaje +"</i>";
          GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
          });
          gmarkers.push(marker);
          return marker;
        }
     
      function show(category) { 
            for (var i=0; i><gmarkers.length; i++) { 
              if (gmarkers[i].mycategory == category) { 
                gmarkers[i].show(); 
              } 
            } 
            
            document.getElementById(category).checked = true; 
          } 
     
      function hide(category) { 
            for (var i=0; i><gmarkers.length; i++) { 
              if (gmarkers[i].mycategory == category) { 
                gmarkers[i].hide(); 
              } 
            } 
            document.getElementById(category).checked = false; 
             
       } 
     
       function boxclick(box,category) { 
          if(box.checked) { 
             show(category); 
              } 
            else { 
             hide(category); 
              } 
          } 
         
      
     
        function initialize() { 
          if (GBrowserIsCompatible()) { 
            var map = new GMap2(document.getElementById("map_Tirana")); 
    	map.setCenter(new GLatLng(41.3275, 19.8188889), 15); 
    	map.enableScrollWheelZoom(); 
    	map.addControl(new GSmallMapControl()); 
            map.addControl(new GMapTypeControl()); 
               
            GDownloadUrl("data.php", function(data) { 
              var xml = GXml.parse(data); 
              var markers = xml.documentElement.getElementsByTagName("marker"); 
              for (var i = 0; i >< markers.length; i++) {
                var name = markers[i].getAttribute("name");
                var foto = markers[i].getAttribute("foto");
                var type = markers[i].getAttribute("type");
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                var detaje = markers[i].getAttribute("detaje");
                var marker = createMarker(point, name, foto, type, detaje);
                map.addOverlay(marker);
            
               }
             });
             // == show or hide the categories initially ==
            
            show("Institucione Shteterore");
            hide("Institucione Kulturore,Fetare dhe Sportive");
            hide("Institucione Arsimore");
            hide("Institucione Financiare");
            hide("Institucione Shendetsore");
            hide("Hoteleri-Turizem");
        
           }
        }
     
    //]]>
    </script> 
    </head> 
     
     
    <body onload="initialize()" onunload="GUnload()"> 
       
    <table class="tborder"> 
    <tr><td valign="top" class="alt2"><div class="mapcss"> 
          <div id="map_Tirana" style="width: 600px; height: 450px" padding:-5px;"></div></div></td> 
    <td valign="top" class="alt1"><div class="sidebar"> 
      <form action="#"> Legend <br /> 
     
       <img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" width="12" height="20"/> 
       <input type="checkbox" name="blue" id="Institucione Shteterore" onclick="boxclick(this,'Institucione Shteterore')" /> Institucione Shteterore<br /> 	  
         <img src="http://labs.google.com/ridefinder/images/mm_20_green.png" width="12" height="20"/> 
         <input type="checkbox" name="green" id="Institucione Kulturore,Fetare dhe Sportive" onclick="boxclick(this,'Institucione Kulturore,Fetare dhe Sportive')" />Institucione Kulturore,Fetare dhe Sportive<br /> 
        <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" width="12" height="20"/> 
        <input type="checkbox" name="red" id="Hoteleri-Turizem" onclick="boxclick(this,'Hoteleri-Turizem')" /> Hoteleri-Turizem<br /> 
        <img src="http://labs.google.com/ridefinder/images/mm_20_white.png" width="12" height="20" /> 
        <input type="checkbox" name="white" id="Institucione Shendetsore" onclick="boxclick(this,'Institucione Shendetsore')" /> Institucione Shendetsore<br /> 
        <img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" width="12" height="20" /> 
        <input type="checkbox" name="yellow" id="Institucione Arsimore" onclick="boxclick(this,'Institucione Arsimore')" /> Institucione Arsimore<br /> 
        <img src="http://labs.google.com/ridefinder/images/mm_20_brown.png" height="20"/> 
        <input type="checkbox" name="brown" id="Institucione Financiare" onclick="boxclick(this,'Institucione Financiare')" /> Institucione Financiare<br /> 
     
      </form> <br /> 
      <u>Locations:</u><br /><div id="side_bar"></div></div> 
    </td></tr></table> 
        <noscript><p>JavaScript must be enabled in order for you to use Google Maps.</p> 
          <p>However, it seems JavaScript is either disabled or not supported by your browser.
          To view Google Maps, enable JavaScript by changing your browser options, and then
          try again.</p> 
        </noscript> 
     
     
     </body> 
    </html> 
     
    Code (markup):

     
    dlatua, Nov 28, 2008 IP