Once you have the basics of the google maps api down, there are many other features that can be added to your map. This example shows how you can add traffic information overlays.
1. Ensure you have your domain specific key
2. Add the javascript call to retrieve realtime traffic info
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdT3_uc-xacwnzrz7-xLzHRQj2QoGbofvAHha71H-d09lHhPaeRQqkL-J4CzS_cMr5AL9-duIKziDqw" type="text/javascript"></script> <script type="text/javascript">
var map;
var trafficInfo;
var toggleState = 1;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.652513,-73.936615), 12);
map.addControl(new GSmallMapControl());
var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}
}
function toggleTraffic() {
if (toggleState == 1) {
map.removeOverlay(trafficInfo);
toggleState = 0;
} else {
map.addOverlay(trafficInfo);
toggleState = 1;
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
<br clear="all"/>
<br/>
<input type="button" value="Toggle Traffic" onClick="toggleTraffic();"/>
* Green: more than 50 miles per hour
* Yellow: 25 - 50 miles per hour
* Red: less than 25 miles per hour
* Gray: no data available
* Black: Dont even think of driving on this road
1. Ensure you have your domain specific key
2. Add the javascript call to retrieve realtime traffic info
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdT3_uc-xacwnzrz7-xLzHRQj2QoGbofvAHha71H-d09lHhPaeRQqkL-J4CzS_cMr5AL9-duIKziDqw" type="text/javascript"></script> <script type="text/javascript">
var map;
var trafficInfo;
var toggleState = 1;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.652513,-73.936615), 12);
map.addControl(new GSmallMapControl());
var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}
}
function toggleTraffic() {
if (toggleState == 1) {
map.removeOverlay(trafficInfo);
toggleState = 0;
} else {
map.addOverlay(trafficInfo);
toggleState = 1;
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
<br clear="all"/>
<br/>
<input type="button" value="Toggle Traffic" onClick="toggleTraffic();"/>
* Green: more than 50 miles per hour
* Yellow: 25 - 50 miles per hour
* Red: less than 25 miles per hour
* Gray: no data available
* Black: Dont even think of driving on this road
Leave a comment