Here is the full listing of our map file:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABCD1234"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var defcentre = new GLatLng(-30.25,148);
var pointarr = new Array();
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(defcentre, 3);
function createMarker(point, who, when) {
// Our info window content
var infoTabs = [
new GInfoWindowTab("Who", who),
//new GInfoWindowTab("When", when)
];
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
return marker;
}
<?
include("resultsfile.htm");
foreach(unserialize(base64_decode($GLOBALS['usergroup_array'])) as $latkey => $latarr){
foreach($latarr as $longkey => $text){
?>
pointarr.push(new Array(, , ""));
<?
}
}
?>
for(i=0;i<pointarr.length;i++){
map.addOverlay(createMarker(new GLatLng(pointarr[i][0], pointarr[i][1]), pointarr[i][2], "Time unknown"));
}
}
}
function panhandle(lat, longi, zoom){
map.setZoom(zoom);
window.setTimeout(function() {map.panTo(new GLatLng(lat, longi));}, 1000);
}
function findme(name){
for(i=0;i<pointarr.length;i++){
if(pointarr[i][2].indexOf(name)> -1){panhandle(pointarr[i][0], pointarr[i][1], 13);break;}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()" style="background:white;margin:0;padding:0;font:11px black arial,verdana,sans-serif;">
<div id="map" style="width: 450px; height: 300px;float:left"></div>
<dl class="first" style="float:left">
<dt><a href="javascript:panhandle(-33.869988,151.209984, 10)">Sydney</a></dt>
<dt><a href="javascript:panhandle(-37.810055,144.959965, 11)">Melbourne</a></dt>
<dt><a href="javascript:panhandle(-35.310001,149.130004, 11)">Canberra</a></dt>
<dt><a href="javascript:panhandle(-27.459999,153.020004, 11)">Brisbane</a></dt>
<dt><a href="javascript:panhandle(-34.93,138.600006, 11)">Adelaide</a></dt>
<dt><a href="javascript:panhandle(-31.959999,115.83999, 11)">Perth</a></dt>
<dt><a href="javascript:panhandle(-42.849998,147.289993, 11)">Hobart</a></dt>
<dt><a href="javascript:panhandle(-32.919998,151.75, 11)">Newcastle</a></dt>
<dt><a href="javascript:panhandle(-34.419998,150.869995, 11)">Wollongong</a></dt>
<dt><a href="javascript:panhandle(-26.517892,153.096542, 9)">Sunshine Coast</a></dt>
<dt><a href="javascript:panhandle(-23.7,133.869995, 11)">Alice Springs</a></dt>
</dl>
</body>
</html>
Final Touches and Future Improvements
Currently our user group list shows the full address underneath the group, while there is nothing wrong with that in principal it does make the page exceedingly long and that information is semi-redundant as it is also shown in hte map itself. Therefore we put a display:none on the address element and org class to keep the list looking as it does now, with only names.
The map file above is included on our user group page using an iframe therefore we need to use some javascript funkery to get inside the iframe to call the findme function:
javascript:top.document.getElementById('mapframe').contentWindow.findme('SydneyDeep .Net User Group')
An added benefit of all the work we have done is that we can use the Tails extension for Firefox to see the hCards that we have created, which can be yet another way to browse the user group listing at zero extra work.
As for what is planned in the future, the createMarker leaves a very good clue. If user group sites would use hCal meeting microformats we could integrate them into the map and show the location and time and date of the next meeting.
I don't know about you, but I think that would be extremely cool and useful.
Do you need help with HTML? 
1
vadivel - 22/12/06
send dynamic tree code
» Report offensive content