I guess everybody knows Google maps. This allows you to zoom into any part of the world, and in the ‘My Maps’ part of the site you can create your own maps.
These maps can be annotated, with markers and polylines.
It’s also possible to create these maps programmatically. And I’ll show you how to do this in the following. First we start with a list of adresses and descriptions :
Auckland New Zealand,Auckland Rotorua New Zealand,Rotorua and Wai-O-Tapu Tongariro New Zealand,Mt Doom in Tongariro
On the first line ‘Auckland New Zealand’ is the address, and ‘Auckland’ is the description. The address will be used to lookup the place and the description will be displayed on the webpage.
Let’s assume these are stored in a file called my_locations.txt.
Then we run the following Python script, which prints a webpage to standard out that puts a marker on each of the location mentioned. Let’s examine this script in a bit more detail.
1 2 3 | import urllib key="Put you Google Maps key here" |
Firstly we import the library urllib, which is used to load URLs from the Internet. We will call a Google Maps web service using this library. Secondly, we set up a key for Google maps. This key can be gotten from the Google Maps API website. This API let’s you embed the a Google Map into your own webpages. Without this key, the script will not work.
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | print """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=%s" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); var point; var marker; """ % key |
Next, we print the start of the webpage. Note that this includes some javascript functions. The important one for us is the load() function. This function will be called when the page is loaded. It looks for for a div element called ‘map’, in which the map will be created. This function is not yet finished, the rest will be added by the script.
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | for line in open('my_locations.txt'): (address, description)=line.split(',') quoted_address=urllib.quote_plus(address) url="http://maps.google.com/maps/geo?q=%s&output=csv&key=%s" % (quoted_address,key) f=urllib.urlopen(url) returnvalues=f.read().split(',') lat=returnvalues[2] lng=returnvalues[3] html=description.strip() print """ point = new GLatLng(%s,%s); marker = createMarker(point, '%s'); map.setCenter(point); map.addOverlay(marker);""" % (lat, lng, html) print |
This code loops over the lines in the file called my_locations.txt. The we call the Google Map API, which is at ‘http://maps.google.com/maps/geo’. This will ‘geocode’ the address, ie it will return the longitude and latitude of the address. The q parameter is the address you want to lookup. The output parameter specifies that we want the geocode to be returned as comma-separated values, which is an easily parseable text format. An example of this is :
200,4,-42.108463,171.336108
200 is the return code, which is success in this case. I have no idea what the 4 means, but the last 2 values are the latitude and longitude. These are extracted and used to create a GLatLng javascript object. This object is then passed as a parameter to the createMarker function, to create the markers. An additional parameter is an HTML string that contains the description.
54 55 56 57 58 59 60 61 62 63 64 65 | print """ map.setCenter(point, 6); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 800px; height: 800px"></div> </body> </html> """ |
Lastly, we print the end of the load() function. In the body of the page, we add a div element called map. The map will have the width and height specified.
An example of a map created this way (with a few embellishments such as photos added) can be found here.
Have fun !
Post a Comment