How to use the Google Map Hack

The Google map hack is an example of using XML and AJAX technologies. This demonstration could be done without using AJAX technology, but would be very messy!

Get a map key from Google. This is a special code that Google requires you to put in your script to access Google Maps API. You can get the code from here: http://www.google.com/apis/maps/signup.html

Once you get that key from Google, embed Google’s code into the element of your HTML page. Google’s code will look like this:

<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuD2gAhf0ynt85U6Fmn8TPRRtjE1vMfVqPnDWLnGITQ_HRSZ3zRQq8nRCupNIsAJ6alr9JKMAtwz0_g" type="text/javascript"></script>

Reference the gmaploader.js script in the <head> element of your HTML file [download/view]:

<script type="text/javascript" src="gmaploader.js"></script></code>


Create a <div> in your HTML document and assign it an “id” attribute so you can reference it.  Give it a width and height as well.

<div id="map" style="width: 600px; height: 600px"><div>

Embed a Javascript snippet into your HTML page after the <body> element where you specify the name of the data file to load and the id of the <div> from step 4.


<script type="text/javascript">

loadMap("map_data.xml","map");

</script>


Create the XML data file, naming it with the name you used in step 5.  The format for this file is described below.


Upload this to your web server and look at it in a browser.



Format of the XML data file

The file is formatted as follows:
<?xml version="1.0"?>
<map>
	<markers>
		<marker></marker>
		…
	</markers<
</map>

<map> element
Attributes


  
     lat 
     required 
     The latitude where the map should be centered. 
  
  
     lng 
     required 
     The longitude where the map should be centered. 
  
  
     zoom 
     required 
     The zoom level (1-8) 
  
  
     view 
     optional 
     « SATELLITE » for a satellite view; defaults to the « roads » view. 
  
  
     iconUrl 
     required 
     The url of the icon to be used for markers. 
  
  
     iconWidth 
     required 
     The width of that marker icon. 
  
  
     iconHeight 
     required 
     The height of that marker icon. 
  


<marker> element
This element contains HTML content that should show up in the marker’s info window when 
the icon is clicked. Be careful to escape characters to XML entities 
(i.e. the tag ‘p’ should become ‘&lt;p&gt;’’).


Attributes


  
     lat 
     required 
     The latitude where the marker should be placed. 
  
  
     lng 
     required 
     The longitude where the marker should be placed. 
  
  
     iconUrl 
     required 
     The url of the icon to be used for this marker; if not defined, defaults to the value in the <map> element. 
  
  
     iconWidth 
     required 
     The width of this marker icon; if not defined, defaults to the value in the <map> element. 
  
  
     iconHeight 
     required 
     The height of this marker icon; if not defined, defaults to the value in the <map> element. 
  


A sample map
<?xml version="1.0"?>
<map 
	lat="27.553539" 
lng="88.482084" 
zoom="7"
view="SATELLITE"
iconUrl=" http://www.someurl.edu/marker.png"
iconWidth="12"
iconHeight="20">
<markers>
	<marker lat="27.323256" 
		lng="88.603020" 
		iconUrl="http://www.url.edu/icon1.png"
		iconWidth="31"
		iconHeight="52">
		Gangtok <i>This is a great place to visit in the winter.</i>
	</marker>	
		>marker lat="27.37278" lng="88.2205">Yuksam</marker>
	</markers>
</map>


Explore
Create a new map and annotate it.  Your map could do a number of things:

provide directions to of from your institution, house, etc.
list landmarks for an area
describe/narrate a trip you took (and link to photos, etc)

lat	required	The latitude where the map should be centered.
lng	required	The longitude where the map should be centered.
zoom	required	The zoom level (1-8)
view	optional	« SATELLITE » for a satellite view; defaults to the « roads » view.
iconUrl	required	The url of the icon to be used for markers.
iconWidth	required	The width of that marker icon.
iconHeight	required	The height of that marker icon.

lat	required	The latitude where the marker should be placed.
lng	required	The longitude where the marker should be placed.
iconUrl	required	The url of the icon to be used for this marker; if not defined, defaults to the value in the <map> element.
iconWidth	required	The width of this marker icon; if not defined, defaults to the value in the <map> element.
iconHeight	required	The height of this marker icon; if not defined, defaults to the value in the <map> element.