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:
Code: Select all
<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&v=2&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>