Integrate google maps with narrative web site

From Gramps
Revision as of 13:32, 3 November 2009 by Romjerome (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

This article explains how to integrate Google maps with the Narrative Web Site creator in GRAMPS 3.01. See this sample screen shot.

1. Obtain your Google Maps API key. (This step may require a Google account.) When prompted, enter the URL for where your GRAMPS web page will be stored. Record your key when it is given (it will be a long string of letters and numbers).

2. Open the text file /usr/share/gramps/plugins/NarrativeWeb.py (Note: you will need administrative privileges to edit this file.)

3. Go to line 1216, and paste in the following block of text:

        if place.lat and place.long:
            of.write('<head>\n')
            of.write(' <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\n')
            of.write('  <title>Google Maps JavaScript API Example: Controls</title>\n')
            of.write('  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****"\n')
            of.write('  type="text/javascript"></script>\n')
            of.write('  <script type="text/javascript">\n')
            of.write('  function initialize() {\n')
            of.write('    if (GBrowserIsCompatible()) {\n')
            of.write('      var map = new GMap2(document.getElementById("map_canvas"))\n')
            of.write('      map.setCenter(new GLatLng(%s, %s), 13);\n' % (place.lat, place.long))
            of.write('      map.addControl(new GSmallMapControl());\n')
            of.write('      map.addControl(new GMapTypeControl());\n')
            of.write('    }\n}\n</script>\n</head>\n')
            of.write('<body onload="initialize()" onunload="GUnload()">\n')
            of.write('  <div id="map_canvas" style="width: 500px; height: 300px"></div>\n')
            of.write('</body>\n')

4. On the fifth line of code above, replace the **** with your API key from step 1. Save the file, and restart GRAMPS.

From now on, when you generate web pages with GRAMPS, on each "Places" page there will be a Google Map. Note: this only works for places for which you have entered the latitude and longitude.

Alternative code

if place.lat and place.long:
    of.write('\t\t\t<tr>\n')
    of.write('\t\t\t\t<td class="ColumnAttribute">%s</td>\n' % _('Maps'))
    of.write('\t\t\t\t<td class="ColumnValue">')
    of.write('\t\t\t\t\thttp://maps.google.com/maps?geocode=&q=%s+%s&ie=UTF8&ll=%s,%s&z=11\n'
    % (place.lat, place.long, place.lat, place.long))
    of.write('\t\t\t\t\thttp://wikimapia.org/#lat=%s&lon=%s&z=11&l=0&m=a&v=2\n'
    % (place.lat, place.long,))
    of.write('\t\t\t\t\thttp://www.openstreetmap.com/?lat=%s&lon=%s&zoom=11&layers=B00FF\n'
    % (place.lat, place.long,))
    of.write('\t\t\t\t</td>')
    of.write('\t\t\t</tr>\n')