Difference between revisions of "Integrate google maps with narrative web site"
(New page: This article explains how to integrate [http://maps.google.com Google maps] with the Narrative Web Site creator in GRAMPS 3.01. 1. O...) |
|||
Line 23: | Line 23: | ||
of.write(' }\n}\n</script>\n</head>\n') | of.write(' }\n}\n</script>\n</head>\n') | ||
of.write('<body onload="initialize()" onunload="GUnload()">\n') | of.write('<body onload="initialize()" onunload="GUnload()">\n') | ||
− | of.write(' | + | of.write(' <div id="map_canvas" style="width: 500px; height: 300px"></div>\n') |
of.write('</body>\n') | of.write('</body>\n') | ||
</code> | </code> |
Revision as of 01:24, 4 August 2008
This article explains how to integrate Google maps with the Narrative Web Site creator in GRAMPS 3.01.
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 1213, 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.