Visualizzare i "documenti" Plomino sopra una mappa usando GoogleMaps

Primo, create un modulo Plomino (Plomino Form) che contenga un campo di testo che chiamerete 'latlon' che immagazzinerà il valore della Latitudine/Longitudine corrispondente al punto che volete visualizzare sulla vostra mappa.

Create alcuni documenti (Plomino documents) con questo modulo (state attenti, Latitudine/Longitudine devono essere inseriti come valori decimali separati da una virgola, ad esempio : 41.9,12.5)

Poi create una vista (Plomino View) che chiamerete 'gmap' contenente una colonna che conterrà i valori del campo 'latlon'.

Una vista (Plomino View) è normalmente visualizzata utilizzando il template di default OpenView dello skin di Plomino.

Ma se volete cambiare il modo di visualizzare il vostro documento (Plomino document) dentro la vista, Plomino vi permette di scrivere il vostro template "personalizzato":

• Andate alla sezione Design - Others - cartella Resources :la cartella Resources è un posto dove puoi inserire tutte le risorse "extra" di cui puoi aver bisogno per un'applicazione Plomino (immagini, files CSS , codice javascript, ZPT templates, ecc....)
• Dentro la ZMI, andate a portal_skins/cmfplomino_templates, e copiate il file OpenView template
• Incollatelo dentro la cartella Resources del vostro database Plomino e rinominate il template in 'googlemapview' ad esempio.
• Modificate il suo contenuto e rimuovete la vista tabellare di default
• Per prima cosa dovete inserire lo script specifico Google Maps API per visualizzare una mappa:
  

<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>

• Poi dovete inserire il tag DIV  che è necessario per la mappa, e dovete essere sicuri che la vostra matrice javascript  'places' sia "popolata con i valori della vista Plomino:
  

<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>

• Salvate il template
  
• Ora dovete dire alla vostra vista (Plomino View) di usare questo template; modificate la vista, andate nella sezione Parameters e inserite il nome del template (googlemapview) nel campo inerente il template della vista da utilizzare.

La vostra mappa è pronta!

Qui è presente una demo (potete loggarvi come nome utente =testuser/password=testuser, e poi cliccare su View placessulla mappa)

Nota Bene: per questo specifico how-to, nel codice, io ho aggiunto alcune chiamate alle API GoogleMaps per visualizzare una descrizione sotto la mappa quando viene cliccato un marker.

Traduzione in italiano a cura di Stefano Saltannecchi