Google Map Display Icon

Discussion in 'PHP' started by yoursanjay, Dec 28, 2008.

0
  1. #1
    My script is for adding location dynamically on Google Map. The script is working properly except the display of the location icon. There is a table called 'gmap_category' from where category name & category icon path is fetched. In the category list box all the category icons are displaying properly but on the map it is not. The link of the script is:
    http://jbmmatrix.com/jbmm0005/interactivemap/index.php

    you can see that only the icon of parking is displaying and the others are Google's default icon. Please help me to resolve the problem.
    Here is the code for the index page:
    
<xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Interactive Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA5TWgIEZ_VPGGdSCjSR8lXhRvQJoNVViNajnqcdI2Bhk0kOYqGxTuHwbkOwH6KYsEa7zaUFhLr_-WpQ" type="text/javascript"></script>
   <script src="admin/labeledmarker.js" type="text/javascript"></script>
   <script type="text/javascript">
    //<![CDATA[

	
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);
        
        document.getElementById("checkbox").checked = true;
        

        GDownloadUrl("admin/markerdata.xml", 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 address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name,address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new LabeledMarker(point, {icon: customIcons[type]});
      markerGroups[type].push(marker);
      var html = "<b>" + name + "</b> <br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      } 
    }

    //]]>
  </script>

  </head>

  <body style="font-family:Arial, sans serif" onLoad="load()" onUnload="GUnload()">
   <div id="sidebar" style="float:left; width: 800px; border: 1px solid black">
   <p><h2 align="center"><font style=" azimuth:behind" face="Verdana, Arial, Helvetica, sans-serif" color="purple">Google Interactive Map</font></h2></p>
   <?php
   include 'admin/includes/config.php';
   $query="select * from gmap_category order by id";
   $result=mysql_query($query) or die ("Couldn't select from database." . mysql_error());
   
   while($row=mysql_fetch_assoc($result))
   {
     $name=$row['category_name'];
	 $id=$row['id'];
	 $iconpath=$row['iconpath'];
	 $path=$row['iconpath'];
	 $show[]= '"'.$name . '": [],';   
 ?>   
   <input type="checkbox" id="checkbox" onClick="toggleGroup('<?php echo $name;?>')" CHECKED />
       
   <?php 
     echo "<img src= $iconpath>";
	 echo $name;
	 //echo $iconpath;	 
   ?>
   <br/>
   
   <script type="text/javascript">

    var iconR = new GIcon(); 	
    
    iconR.iconSize = new GSize(32, 32);
	iconR.image = 'http://jbmmatrix.com/jbmm0005/interactivemap/<?php echo $path;?>';
	//iconR.image = 'http://jbmatrix.com/workshops/interactivemap/bluecirclemarker.png';
    iconR.iconAnchor = new GPoint(16, 16);
    iconR.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
   
    customIcons["<?php echo $name;?>"] = iconR;

	var markerGroups = {<?php 
	  $count=count($show);
	  
	  for( $i=0; $i<=$count-1; $i++ )
	  {
		echo $show[$i];
		//echo $i;
		
	  }
	?>}
	</script>
   
<?php

}	 
?>

</div>	
	<div id="map" style="float:left; width: 800px; height: 450px; border: 1px solid black">

	</div>
  </body>
    HTML:

     
    yoursanjay, Dec 28, 2008 IP