Using the Google Maps API v.3 and the Roadkill API to add a Real-Time Map to your webpage or blog

NOTE: This is an update to an earlier demonstration post using the Google Maps API v.2 to add recent roadkill information to your webpage or blog.

STEP 1. Configure the URL to request

Visit and design your query using the editor.  For example, you may just be interested in one Highway section such as the first 22 miles of Highway 21.

Stripped of the empty parameters your url should now resemble:

Now, we can add some special parameters to grab the most recent observations.  Add to your url the following &start=-365&end=now to limit your results to the last year of observations.  The -365 is the number of days before the current date and time to include.  You may tailor this to your needs.  You can of course also use full dates, but this allows your query to be dynamic and useful in the future.

Possible parameters for date fields Observed Date (start, end) and Reported or iNsert Date (nstart, nend) include:

  • Valid dates in the format 1/10/2008
  • Now - current system datetime in Mountain Standard Time
  • Today - current day in Mountain Standard Time
  • Yesterday - previous day in Mountain Standard Time
  • Integer - positive or negative offset in days

Finally, add the kml extension, by copying the path from the kml icon or copying the following:


STEP 2: Add the Code

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>IFWIS Roadkill API Google Maps JavaScript API v3 Example</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function initializeMap() {
  var mapCenter = new google.maps.LatLng(43.58, -116.06);
  var myOptions = {
    zoom: 12,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var ctaLayer = new google.maps.KmlLayer('', {preserveViewport: true});
<body onload="initializeMap()">
  <div id="map_canvas">Map Loading...</div>


STEP 3: Enjoy

Here's a Live Example


What you see here is a live example of the same code from Step 2 above except instead of using the onload event of the html body, the scripts are placed immediately following the div element inside the html body.  Using this method you may place live maps on blogs, forums and other websites.

Explore the Google Maps Javascript v3 API and IFWIS Core API for more mashup ideas!