Integrate google maps with narrative web site

From Gramps
Jump to: navigation, search
Gramps-notes.png

Please update or expand this section.


Gramps-notes.png
Possibly obsolete

Worked with Gramps 3.0.x

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

Google Maps 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')
Retrieved from "https://www.gramps-project.org/wiki/index.php?title=Integrate_google_maps_with_narrative_web_site&oldid=85526"