Difference between revisions of "Integrate google maps with narrative web site"
Line 6: | Line 6: | ||
[[File:Google.maps.screenshot.png|thumb|400px|Google Maps screen shot]]. | [[File:Google.maps.screenshot.png|thumb|400px|Google Maps screen shot]]. | ||
− | 1. Obtain your [ | + | 1. Obtain your [https://developers.google.com/maps/faq?csw=1#using-google-maps-apis Google Maps API key]. (This step may require a [http://www.google.com/accounts 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.) | 2. Open the text file /usr/share/gramps/plugins/NarrativeWeb.py (Note: you will need administrative privileges to edit this file.) |
Revision as of 08:40, 26 June 2021
This article's content is incomplete or a placeholder stub. |
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 this sample
.
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&v=2&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')