Displaying Doppler Radar with the Google Maps API
This is an advanced tutorial so you haven't got a handle on the basics yet you'll want to be comfy with them first. We'll make use of the GGroundOverlay object, Noaa's updated radar .gif images, and the Where's the radar Site? application to retrieve the bounding coordinates for each radar site.
First you'll need an API key. You can sign up here.
Begin by deciding where you want your map to be displayed, then hit this URL replacing the la and lo query string arguments to reflect the latitude and longitude of your location respectively:
http://mapki.com/radar/get.php?la=48.80686346108517&lo=-79.013671875
This url will return XML data that contains information we need about the radar sites nearby. The sites we'll be working with are CXX in Burlington Vermont, and ENX in Albany NY. The XML output from the application looks like this:
<marker tllat="45.2676" tllng="-76.9899" brlat="39.894551" brlng="-71.128392" site="ENX"/> <marker tllat="47.2796" tllng="-76.1867" brlat="41.73241" brlng="-70.13522" site="CXX"/>
Begin by constructing and initializing the GMap2 object which to which we'll add the overlays. The setCenter method will draw and center the map around the desired coordinates. The second argument to this method is the zoom level for the map.
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(43.609549935614595,-72.7679443359375), 7);
The GGroundOverlay object is constructed using an image path, and a GLatLngBounds constructed with two GLatLng objects. This creates the rectangle in which the overlay will be loaded and positions the radar accurately on the map. To construct our two points we use the following code:
var en_boundaries = new GLatLngBounds(new GLatLng(39.894551,-76.9899), new GLatLng(45.2676,-71.128392));
var cx_boundaries = new GLatLngBounds(new GLatLng(41.73241,-76.1867004255815), new GLatLng(47.2795563992587,-70.13522));
We then create our GGroundOverlay instances using the GLatLngBounds object and the paths to the corresponding radar image. Note that the URLs of the radar images are created using the abbreviation for the radar returned in the XML as the site attribute.
var en_overlay = new GGroundOverlay("http://www.srh.noaa.gov/ridge/RadarImg/NCR/ENX_NCR_0.gif", en_boundaries);
var en_overlay = new GGroundOverlay("http://www.srh.noaa.gov/ridge/RadarImg/NCR/CXX_NCR_0.gif", cx_boundaries);
To display the image simply call the addOverlay method on the GMap2 class
map.addOverlay(en_overlay);
map.addOverlay(cx_overlay);
And finally, here's our result: