Custom Google Map Icon If Value >=1
I am using the code below to correctly show markers on a Google map using location data from MySQL database.
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var finds = markers[i].getAttribute("finds");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = locationname + ', No.of finds: ' + "&l开发者_JAVA技巧t;b>" + totalfinds + "</b>";
var icon = customIcons[totalfinds] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
As it stands at the moment, the code to determine whether the marker shown, is red, or green, is pure and simply whether the value of one of the fields is '0' or '1'.
What I would like to do is to change this to reflect whether the value is '0' or whether it's '1' or 'greater than 1' to determine the color of the marker.
With my limited knowledge I've tried using '>1', '>=1' which haven't worked.
I just wondered whether it would be at all possible whether someone could please point me in the right direction so I can get this to work.
@IRHM - Thanks for the reply, it's clear now.
The '0' and '1' in your example are just ways of "naming" those two icons. 'cat' and 'dog' would be equally valid names e.g.
var customIcons = {
cat: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
dog: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
Your code happens to work today because when you count the icons, you end up with 0 or 1 which are the names you chose. To change it so that you can select '0' or '> 1' you need to add some extra logic. Replace:
var icon = customIcons[totalfinds] || {};
with:
var icon = {};
if (totalFinds == 0) {
icon = customIcons[0];
} else if (totalFinds >= 1) {
icon = customIcons[1];
}
This logic checks the value of totalFinds, and then uses that to look up one of the icons in customIcons using the names you provided (in this case '0' or '1').
加载中,请稍侯......
精彩评论