- 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">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:
1: // init map
2: var map;
3: $(document).ready(function(){
4: var latlng = new google.maps.LatLng(35.6802, -121.1165);
5: var myOptions = {
6: zoom: 3,
7: center: latlng,
8: mapTypeControl: true,
9: mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
10: navigationControl: true,
11: navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
12: mapTypeId: google.maps.MapTypeId.SATELLITE
13: };
14:
15: map = new google.maps.Map(document.getElementById("map"), myOptions);
16:
17: });
When the map is ready:
1: // SEE : http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html
2:
3: $('#map').ready(function(){
4: $.ajax({
5: type: "GET",
6: url: "getxml.php?q=http://www.earthquake.usgs.gov/eqcenter/catalogs/7day-M2.5.xml",
7: dataType: "xml",
8: success: function(xml){
9: $(xml).find('entry').each(function(){
10: // Retrieve all needed values from XML
11: var title = $(this).find('title').text();
12: var updated = $(this).find('updated').text();
13: var link = $(this).find('link').text();
14: var summary = $(this).find('summary').text();
15: var coord = $(this).find('georss\\:point').eq(0).text();
16: if(!coord){var coord = $(this).find('point').text();};
17: var points = coord.split(' ');
18: var latitude = parseFloat(points[0]);
19: var longitude = parseFloat(points[1]);
20: var elev = $(this).find('georss\\:elev').eq(0).text();
21: if(!elev){var elev = $(this).find('elev').text();};
22: var htmlString = "<b>" + title + "</b>" + "<p>" + summary + "<br>";
23: // create a marker
24: var myLatlng = new google.maps.LatLng(latitude,longitude);
25: var marker = new google.maps.Marker(
26: {
27: position: myLatlng,
28: map: map,
29: title: title
30: });
31:
32: addMarkerBubble(marker, map, htmlString);
33: // Show output below map
34: $('<li></li>')
35: .html(title + ' (updated: ' + updated + ') at ' + points[0] + ', ' + points[1])
36: .appendTo('#output');
37: });// end each
38: }
39: }); // end $.ajax
40: });// end function
41:
42: function addMarkerBubble(marker, map, message){
43: // set balloon
44: var infowindow = new google.maps.InfoWindow(
45: {
46: content: message,
47: size: new google.maps.Size(400,200)
48: });
49:
50: // add listener to marker
51: google.maps.event.addListener(marker, 'click' ,function(){
52: infowindow.open(map,marker);
53: });
54: };
Explanations:
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.
The next 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.
