| Marker icons based on date.
Markers need to have a date field in the XML file. This will assume you have a date field in the format "yyyy,mm,dd". for example date="2006,4,30" for April 30, 2006. It's assumed you know how to add your own icons. A couple of things need to be setup. What *I* did, may not work for you. Create a global variable for storing the type of icon. I chose 'past','close' & 'future'. If you want to have multiple dates, such as 1 week out, 2 weeks out, whatever, modify what you want to call it. For this page, I hardcoded the date into the page. All checks are done based on Jun 1,2006. For being 'close', I'm using 30 days. | |
|
For the 'code' part.
I have a main page that has the javascript for creating the map, I don't use the onload function, it's in the page right before </body>. I have a couple functions that are stored in a .js file. I create global variables in the main page. in the main page: var dateicon="current"; var baseIcon = new GIcon(); baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); baseIcon.infoShadowAnchor = new GPoint(18, 25);In the .js file, I have the code to read the data from XML. It could be in a database, or it could be an XML file, either would work. In the function that's called to read the marks, I have: var comparedate = new Date(); var closedate = new Date(comparedate); closedate.setDate(closedate.getDate()+30);What this does is set the compare date to today, and then set the 'close' date. in this case, 30 days out. (the example map above doesn't check based on today) | |
The next thing is, right after you read latitude and longitude, read in the 'date' field. The first line creates a date object from the 'date' field of the marker data.
var markerdate=new Date(markers[loop1].getAttribute("date"));
if(comparedate>markerdate){
dateicon="past";
}
else if(markerdate < closedate){
dateicon="close";
}
else {
dateicon="future";
}
Still with me? just about done.
If you have a 'createmarker' function like found in other tutorials, you'll need to place the following in that function:
var icon = new GIcon(baseIcon);
icon.image= "/images/green.png"; /* set default icon to green */
if (dateicon == 'past' ){
icon.image= "/images/red.png";
}
else if (dateicon == 'close'){
icon.image = "/images/yellow.png";
}
The above should have the icon set to whatever you want it. The following line is an alteration of the marker line in the function. Essentially, just add ,icon inside the GMarker() construct.
var marker = new GMarker(point,icon);Assuming all goes well, you should now have color coded icons based on time. I'm using my own icons, you can do that or use the google supplied icons. If all does not go well, try putting: GLog.write(dateicon);In the loop reading the data, it should be changing during the looping. If you put: GLog.write(markerdate);In the loop, you should be able to see the date change for each marker. If you see an error instead of a date, check the spelling. Also, check to be sure the date field in the data is correct. The following is printed out right after the date comparisons. | |