Quake Tracker using Google Maps API v3 and XML/Atom feed

Jun 17, 2009 in BLOG • CODE
google apis google maps javascript
3 min read

http://www.ipreferjim.com/maps/quakes.html

For this, I used the following:

Google Maps API v3 (http://code.google.com/apis/maps/documentation/v3/)
jQuery v1.3.2 (http://jquery.com/)

First, you will need to include the google maps api in your header:

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"&gt

This line of code is slightly different from the v2 API because an API key isn’t needed. This will probably change in the near future. It is also necessary to load jQuery, which can be done by downloading it from the above link, or loading it via Google’s AJAX API.

When the document is ready:

// init map
var map;
$(document).ready(function(){
  var latlng = new google.maps.LatLng(35.6802, -121.1165);
  var myOptions = {
     zoom: 3,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
     navigationControl: true,
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.SATELLITE
     };
  
   map = new google.maps.Map(document.getElementById("map"), myOptions);  
 });

First of all, I create a global variable called map, so I can use it in each function.

Then, when the document is ready, I get a geographic coordinate which Google Maps builds from maps.LatLng. This coordinate is in California, because I know there are quakes there.

Next, I’ve set a number of options (lines 6-12) for the map including:

zoom level
map center
a control to allow user to change the look of the map
a control to allow user to change zoom
default map type of “SATELLITE”, which shows tectonic regions

The Google Maps API v3 makes it very easy to supply these options to the Map constuctor, as you can see on line 15 of the first code snippet. The map is loaded into the DOM object supplied as the first parameter in the constructor.

When the map is ready:

// SEE : http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html
  
 $('#map').ready(function(){
   $.ajax({
     type: "GET",
     url: "getxml.php?q=http://www.earthquake.usgs.gov/eqcenter/catalogs/7day-M2.5.xml",
     dataType: "xml",
     success: function(xml){
             $(xml).find('entry').each(function(){
                  // Retrieve all needed values from XML
                  var title = $(this).find('title').text();
                  var updated = $(this).find('updated').text();
                  var link = $(this).find('link').text();
                  var summary = $(this).find('summary').text();
                  var coord = $(this).find('georss\\:point').eq(0).text();
                  if(!coord){var coord = $(this).find('point').text();};
                  var points = coord.split(' ');
                  var latitude = parseFloat(points[0]);
                  var longitude = parseFloat(points[1]);    
                  var elev = $(this).find('georss\\:elev').eq(0).text();
                  if(!elev){var elev = $(this).find('elev').text();};
                  var htmlString = "<b>" + title + "</b>" + "<p>" + summary + "<br>";
                  // create a marker
                  var myLatlng = new google.maps.LatLng(latitude,longitude);
                      var marker = new google.maps.Marker(
                      {
                          position: myLatlng,
                          map: map,
                          title: title
                      });
                  
                      addMarkerBubble(marker, map, htmlString);
                      // Show output below map
                      $('<li></li>')
                          .html(title + ' (updated: ' + updated + ') at ' + points[0] + ', ' + points[1])
                          .appendTo('#output');
              });// end each
          }
      }); // end $.ajax
  });// end function
   
  function addMarkerBubble(marker, map, message){    
      // set balloon
      var infowindow = new google.maps.InfoWindow(
      {
            content: message,
        size: new google.maps.Size(400,200)
      });        
      
      // add listener to marker
      google.maps.event.addListener(marker, 'click' ,function(){
          infowindow.open(map,marker);
      });
  };

The second snippet is the AJAX call to retrieve the feed and build the markers and info windows when the GET succeeds.

Inside the function call, I’ve used jQuery’s simplified DOM access for the returned XML. On line 9 of this snippet, I find each ‘entry’ node and then iterate over each of these nodes to find the text of each node value.

On lines 15-16 and 20-21, I check the variables because some browsers properly process namespaced nodes and some don’t. This simple check allows the application to display properly in Chrome, Safari, Firefox, and Internet Explorer.

Next, I create a marker on the map at the given coordinate and give it a title (tooltip).

On line 32, I call the function ‘addMarkerBubble’ to create an info window and add the event to the map. After this, I add the title and updated date to a div element below the map.

Related Articles