Difference between revisions of "Integrate google maps with narrative web site"

From Gramps
Jump to: navigation, search
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Category:Developers/General]]
 
This article explains how to integrate [http://maps.google.com Google maps] with the [[Gramps_3.0_Wiki_Manual_-_Reports#Narrated_Web_Site|Narrative Web Site]] creator in GRAMPS 3.01.  See this sample
 
This article explains how to integrate [http://maps.google.com Google maps] with the [[Gramps_3.0_Wiki_Manual_-_Reports#Narrated_Web_Site|Narrative Web Site]] creator in GRAMPS 3.01.  See this sample
 
[[Media:Google.maps.screenshot.png|screen shot]].
 
[[Media:Google.maps.screenshot.png|screen shot]].
Line 6: Line 7:
 
2. Open the text file /usr/share/gramps/plugins/NarrativeWeb.py  (Note: you will need administrative privileges to edit this file.)
 
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 1213, and paste in the following block of text:
+
3. Go to line 1216, and paste in the following block of text:
  
 
<code>
 
<code>
Line 13: Line 14:
 
             of.write(' <meta http-equiv="content-type" content="text/html; charset=utf-8"/>\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('  <title>Google Maps JavaScript API Example: Controls</title>\n')
             of.write('  <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;key=****"\n')
+
             of.write('  <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=****"\n')
 
             of.write('  type="text/javascript"></script>\n')
 
             of.write('  type="text/javascript"></script>\n')
 
             of.write('  <script type="text/javascript">\n')
 
             of.write('  <script type="text/javascript">\n')
Line 31: Line 32:
  
 
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.'''
 
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')

Revision as of 20:32, 3 November 2009

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">\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\n') of.write('\t\t\t\t%s\n' % _('Maps')) of.write('\t\t\t\t')

    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') of.write('\t\t\t\n')