Display Plomino documents on a map using GoogleMaps

First, create a form containing a text field named 'latlon' for instance that will store the Latitude/Longitude corresponding to the point you want to display on your map.

Create few documents with this form (be careful, Latitude/Longitude must be provided as decimal values separated by a comma, e.g.: 41.9,12.5)

Then, create a view named 'gmap' for instance containing a column that will contain this 'latlon' value.

A Plomino view is normally displayed using the default Plomino skin OpenView template.

But if you want to change the way you display your documents in a view, Plomino let you write your own template:

• Go to Design tab - Others - Resources folder: the Resources folder is a place where you can store an extra resource you might need for a Plomino application (images, CSS files, javascript, ZPT templates, etc.)
• In the ZMI, go to portal_skins/cmfplomino_templates, and copy the OpenView template
• Paste it in your database's Resources folder, and rename it 'googlemapview' for instance
• Edit its content, and remove the default view table layout
• First you need to insert the Google Maps API script to display a map:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAO-qakdV5g5hj9BUJGe4uChSHL-iWiuDK5piozJoE4ysxeiTLRRQqQPmZ25i2jyn-2SbIBuY_wRLRyg"
      type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[

var places=new Array();

function load() {
      if (GBrowserIsCompatible()) {

          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(41.54, 12.30), 6);
          var mapControl = new GMapTypeControl();
          map.addControl(mapControl);
          map.addControl(new GLargeMapControl());
          map.enableScrollWheelZoom();

          function createMarker(content, lat, lon) {
             var point = new GLatLng(lat, lon);
             var marker=new GMarker(point);
             return marker;
          }
          for(i=0;i<places.length;i++) {
             map.addOverlay(createMarker(places[i][0],places[i][1]));
          }
      }
}
registerEventListener(window, 'load', load);
registerEventListener(window, 'unload', GUnload);
    //]]>
</script>

• Then you have to put the DIV tag needed for the map, and make sure your  'places' javascript array will be populated with the Plomino view values:

<div id="map" style="width: 100%; height: 400px"></div>

<tal:loop tal:repeat="doc python:here.getAllDocuments()">
<script tal:define="obj python:doc.getObject();" tal:content="structure python:'places.push(new Array('+doc.PlominoViewColumn_gmap_latlon+'));'"></script>
</tal:loop>

• Save the template
  
• Now you must tell your view to use this template: edit the view, go to the Parameters tab, and enter the template name (googlemapview) in the View template field.

Your map is ready.

(log in as id=testuser/password=testuser, and then click on View places on the map)

Note: compare to thsi how-to code, I have added few GoogleMaps API calls to displays a description below the map when you click on a marker.