<!--- Invoke the Loads query --->
<cfinvoke component="CFC.loads" method="loadsQuery" returnvariable="loads">
<html>
<head>
<!--- Google Map --->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var infowindow;
var arrMarkers = new Array();
MapMarker = function(lat,lng,m_title,m_content) {
this.lat = lat;
this.lng = lng;
this.m_title = m_title;
this.m_content = m_content;
}
<cfoutput query="loads">
arrMarkers[#loads.currentrow-1#] = new MapMarker(#loads.origin_lat#,#loads.origin_long#,"Marker #loads.currentrow# Title","Marker #loads.currentrow# Content");
</cfoutput>
initialize = function(){
var myLatlng = new google.maps.LatLng(17.9369286375494, 102.7001953125);
var myOptions = {
scrollwheel: false,
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Close InfoWindow when clicking anywhere on the map.
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// draw markers on map
for (var i in arrMarkers) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arrMarkers[i].lat, arrMarkers[i].lng),
map: map,
title: arrMarkers[i].m_title
});
// Register a click listener on each marker created
google.maps.event.addListener(marker, 'click', (function(markerArg, index) {
return function() {
infoWindow.setContent(arrMarkers[index].m_content);
infoWindow.open(map, markerArg);
};
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%; padding:0; margin:0 auto;"></div>
</body>
</html>
|