My stuff » Google maps http://michelhollands.net/blog Tech and travel tidbits Tue, 13 Dec 2011 09:59:22 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 Trip maps page http://michelhollands.net/blog/2009/01/06/trip-maps-page/ http://michelhollands.net/blog/2009/01/06/trip-maps-page/#comments Tue, 06 Jan 2009 14:21:53 +0000 Administrator http://michelhollands.net/blog/2009/01/06/trip-maps-page/ Hello, best wishes for the new year first of all.

A new page for trip maps was added, showing the Google Maps I’ve created to show photos. Pretty soon all cameras will have GPS, so this type of map will be generated automatically.

]]> http://michelhollands.net/blog/2009/01/06/trip-maps-page/feed/ 0 More Google maps stuff http://michelhollands.net/blog/2007/06/26/more-google-maps-stuff/ http://michelhollands.net/blog/2007/06/26/more-google-maps-stuff/#comments Tue, 26 Jun 2007 14:50:27 +0000 Administrator http://michelhollands.net/blog/2007/06/26/more-google-maps-stuff/ This Google Maps API Tutorial website has some very good how-tos on Google Maps.

Needless to say, I added some of those things like Fitting the map to the data and Lots of sidebar entries to my maps. Check out the New Zealand and Firenze maps.

]]> http://michelhollands.net/blog/2007/06/26/more-google-maps-stuff/feed/ 0 Creating a Google map using XML http://michelhollands.net/blog/2007/06/18/creating-a-google-map-using-xml/ http://michelhollands.net/blog/2007/06/18/creating-a-google-map-using-xml/#comments Mon, 18 Jun 2007 15:50:47 +0000 Administrator http://michelhollands.net/blog/2007/06/18/creating-a-google-map-using-xml/ You can also create Google Maps using XML : check out this
article.

]]> http://michelhollands.net/blog/2007/06/18/creating-a-google-map-using-xml/feed/ 0 Creating Google maps with Python http://michelhollands.net/blog/2007/06/05/creating-google-maps-with-python/ http://michelhollands.net/blog/2007/06/05/creating-google-maps-with-python/#comments Tue, 05 Jun 2007 17:22:52 +0000 Administrator http://michelhollands.net/blog/2007/06/05/creating-google-maps-with-python/ 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&amp;v=2&amp;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 !

]]> http://michelhollands.net/blog/2007/06/05/creating-google-maps-with-python/feed/ 0