Talk:Integrate google maps with narrative web site

From Gramps
Jump to: navigation, search

It works, you have to make sure that Python accepts the indentation format on the code your pasting. You can check it using the Python GUI (IDLE) which where the first thing you installed to get Gramps to work. After you have opened the file with IDLE and pasted the code you can check it using Run > Check Module or just press Alt X. If Python don't scream after 5-20 secs, everything is fine. Simply power up Gramps again and it should work.

I added the code on line 1133 in Gramps 3.1.3-1, which is the location of the PlacePage area. If you using this code below you will get a hybrid map with a marker and an InfoWindow with the place name in it. Map size in the code is set to width: 965px height: 500px to fit with the Maniz template.

        if and place.long:
            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="****"\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.long))
            of.write('      map.setMapType(G_HYBRID_MAP);\n')
            of.write('      map.addControl(new GSmallMapControl());\n')
            of.write('      map.addControl(new GMapTypeControl());\n')
            of.write('      var point = new GLatLng(%s, %s);\n' % (, place.long))
            of.write('      map.addOverlay(new GMarker(point));\n')
            of.write('      map.openInfoWindow(map.getCenter(),\n')
            of.write('                  document.createTextNode("%s"));\n' % (self.page_title))
            of.write('    }\n}\n</script>\n</head>\n')
            of.write('<body onload="initialize()" onunload="GUnload()">\n')

of.write(' div id="map_canvas" style="width: 965px; height: 500px;">\n')


For some strange reason I had to remove the < in front of div on the second to last line of the code above. Wiki made a 956x500 div area on this page when it was there. Just add it to your code later and it will work.

--Philip 12:02, 10 February 2010 (UTC)

Could anyone update this for version 3.1.2-1, or else put in a generic description about where to paste that code? I don't think line 1216 is the right place anymore.

It was an old modification, also on bug-tracker as Feature Request. Planned for using this change around 2008-07-25 ... You can see where to add this code by using SVN log time (rev10889). Then to look at the same lines/data on current code.
line 1216 sounds strange at this log time ... but I think you need to add this code on :
class PlacePage(BasePage):

[update]: Hmmm, doesn't work. I tried both code variations, and stuck them in class PlacePage (BasePage), between

       if place.long:

of.write('\t\t\t\n') of.write('\t\t\t\t%s\n' % _('Longitude')) of.write('\t\t\t\t%s\n' % place.long) of.write('\t\t\t\n') and of.write('\t\t\n') of.write('\t\n')

Then restarted GRAMPS, regenerated the NAVWEB but there's no map in the entries I have put lat/long for. ~gillespieza
If so, maybe following SVN log time (rev10889) and to add this code on class MediaPage(BasePage) ?
1216                 # TODO. Mixup url and path
1217                 # path = convert_disk_path_to_url(path)
on last SVN revision (SVN branch => r13504), it is on :
1326                 # TODO. Mixup url and path
1327                 # path = convert_disk_path_to_url(path)

--Romjerome 07:43, 6 November 2009 (UTC)

Different approach

Rather than modifying the code of Gramps itself, it is also possible to do some post-processing on the generated webs pages. The big advantage is that you won't have trouble when a new version of Gramps is installed. Elsewhere the procedure to modify web pages has been described already. Using sed, it is quite easy and incredibly fast. (The described method to modify the web pages assumes that you are working on a GNU/Linux platform.)


A few lines of Javascript code grabs the geographical coordinates from the page and feeds it to a call to Cloudmade/Openstreetmaps. In order to avoid inline code, there is a function doing what is needed and a call to this function to be embedded in the html code of the page.

Javascript (file MT.js)

function GetMap() {

   var x=document.getElementsByClassName("ColumnAttribute");
   var Li=-1;
   var Bi=-1;
   for (var i=0; i<x.length; i++)
     if (x[i].innerHTML=="Lengtegraad")
     if (x[i].innerHTML=="Breedtegraad")
   if (Bi==-1 || Li==-1)
     document.getElementById("location-map").innerHTML="(Geen kaart: geografische coördinaten niet beschikbaar)";
   var y=document.getElementsByClassName("ColumnValue");
   var L=y[Li].innerHTML;
   var B=y[Bi].innerHTML;
   var cloudmade = new CM.Tiles.CloudMade.Web({key: '....'});
   var map = new CM.Map('location-map', cloudmade);
   map.setCenter(new CM.LatLng(B, L), 12);
   map.addControl(new CM.LargeMapControl());
   map.addControl(new CM.ScaleControl());
   map.addControl(new CM.OverviewMapControl());


Insert 1 (file js-insert)

<script type="text/javascript" src="../../../js/MT.js"></script>

Insert 2 (file div-insert)


Insert 3 (js-call-insert)

<script type="text/javascript">



Shell script to modify Location pages

  1. !/bin/sh
  2. This script generates a new Gramps website and uploads modified/added files
  3. to the web server.
  4. Menno Tjoelker 2009-2010


  1. Insert javascript and
    for geographic map in Location HTMLs.

for file in plc/*/*/*.html; do

  sed --in-place -e "/image\/icon/r ../NAVWEB.MT/inserts/js-insert" -e "/<\/h3>/r ../NAVWEB.MT/inserts/div-insert" -e "/<\/body>/r ../NAVWEB.MT/inserts/js-call-insert" -e //N $file



  1. Copy other files (non-html)

cp -r ../NAVWEB.MT/js ../


Please notice that this is not a straight-forward recipee; if you want to use it, you will have to adapt it to your own situation with regard to directories, etc. To see how it looks like, see my website [1]. It is possible to embellish the map by some additional stuff. See for that the website of CloudMade [2].