……Marco Valli's Blog……

Internet, Tecnologia e SharePoint!!!

Google Maps & SharePoint


In questi giorni mi sono scontrato con un’esigenza particolare di un cliente, dovendo realizzare in sharepoint un database contenente informazioni su indirizzi, è nata l’esigenza di vedere effettivamente dove quei luoghi fossero, senza naturalmente dover aprire una nuova pagina e digitare manulamente l’indirizzo…

La soluzione poteva prevedere l’utilizzo di virtual earth oppure di google maps… dopo un primo esame, la scelta è ricaduta sul secondo candidato principalmente per due motivi:

  1. maggiore accuratezza nel ricercare le vie (e non sto parlando di paesini sperduti ma di Milano centro..)
  2. mappe notevolmente più aggiornate (passando a città un po’ più piccole l’aggiornamento risale anche a più di 5 anni fa… mentre Google ha un’aggiornamento di massimo 1,5/2 anni)

Per poter inserire la mappa nella pagina (nel mio caso ho modificato la DispForm.aspx della lista) è necessario inserire una dataview nel punto in cui si vuole vedere la mappa, io ho scelto di posizionarla sotto la form stessa, in modo che per raggiungere i pulsanti OK e Annulla non sia necessario effettuare uno scroll kilometrico…

Dopo aver inserito la dataview, bisogna limitare la visualizzazione della stessa al solo elemento nella pagina corrente, per ottenere questo, è sufficiente creare un nuovo parametro querystring (nome a scelta) il cui parametro si chiama ID, in questo modo al caricamento della pagina, dall’url viene recuperato l’ID che è sempre presente in qualsiasi form di sharepoint (NewForm, EditForm e DispForm).

Una volta creato il parametro, bisogna impostare il filtro sulla dataview in modo che il parametro appena creato sia uguale al valore ID (che viene recuperato e filtrato dalla dataview). In questo modo la dataview restituirà un solo risultato e, in seguito, una sola mappa.

Prima di procedere è necessario procurarsi un codice per utilizzare le api di google map, il codice si ottiene gratuitamente ma bisogna essere registrati con account Google; cliccando QUI arrivate alla pagina in cui inserire l’url del sito in cui si troverà la mappa di google, cliccando su Generate API Key, otterrete una stringa alfanumerica, senza la quale ad ogni caricamento della mappa verrà generato un avviso (anche se la mappa funziona correttamente…)

Adesso bisogna creare un file .xsl con questo codice:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”
http://www.w3.org/1999/XSL/Transform” xmlns:ddwrt2=”urn:frontpage:internal”>
<xsl:output method=”html” indent=”no”/>
<xsl:template match=”/” xmlns:ddwrt=”
http://schemas.microsoft.com/WebParts/v2/DataView/runtime”>
<xsl:call-template name=”dvt_1″/>
</xsl:template>
<xsl:template name=”dvt_1″>
<xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row” />
<xsl:call-template name=”dvt_1.body”>
<xsl:with-param name=”Rows” select=”$Rows” />
</xsl:call-template>
</xsl:template>
<xsl:template name=”dvt_1.body”>
<xsl:param name=”Rows” />
<script src=”
http://maps.google.com/maps?file=api&amp;v=2&amp;key=<<GOOGLE API KEY>>” type=”text/javascript”>
</script>
<div id=”xslmap” style=”width:750px; height:400px”>
</div>

<script type=”text/javascript”>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}

var point;
var marker;
var address;
var htmladdress;

var map = new GMap2(document.getElementById(“xslmap”));
map.setCenter(new GLatLng(51, -129), 4);
map.checkResize();

map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();

var geocoder = new GClientGeocoder();

addLoadEvent(function() { map.checkResize(); });

</script>
<xsl:for-each select=”$Rows”>
<xsl:call-template name=”dvt_1.rowview” />
</xsl:for-each>
<script type=”text/javascript”>
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(address, function(point) {if (!point) { var marker = new GMarker(new GLatLng(39.6,-98)); map.addOverlay(marker); marker.openInfoWindowHtml(address); } else { var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } );
} else {
var point = new GLatLng(39.6,-98);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(“Testing”);
}
}
</script>
</xsl:template>
<xsl:template name=”dvt_1.rowview”>
<script type=”text/javascript”>
address = &quot;<xsl:value-of select=”@Address” />&quot; + “, ” + &quot;<xsl:value-of select=”@City” />&quot;  + “, ” + &quot;<xsl:value-of select=”@State” />&quot;  + “, ” + &quot;<xsl:value-of select=”@ZipCode” />&quot;  + “, ” + &quot;<xsl:value-of select=”@Country” />&quot; ;
geocoder.getLatLng(  address,  function(point)  {  if (point)  {   var marker = new GMarker(point);  map.addOverlay(marker);  GEvent.addListener (   marker,   &quot;click&quot;,   function()  {   this.openInfoWindowHtml(<<TESTO DEL TOOLTIP>>);  }  );  }  }  );
</script>
</xsl:template>
</xsl:stylesheet>

Copiare questo codice in notepad e salvarlo sul desktop modificando l’estensione in .xsl naturalmente dovrete inserire la vostra API Key e dovrete inserire anche il testo che volete venga visualizzato nel tooltip che appare cliccando sul pin che viene generato sulla mappa..

Per recuperare le informazioni sull’indirizzo dalla dataview, bisogna inserire i valori della lista in uso, in questo caso io ho utilizzato il campo Address + City + State + ZipCode + Country , il nome dei campi viene recuperato grazie a questa stringa:

<xsl:value-of select=”@NOME DEL CAMPO” />

Naturalmente bisogna utilizzare il vero nome del campo e non l’etichetta del campo stesso.. per conoscere il vero nome del campo, basta tentare di modificare il campo stesso e nell’url, ci sarà la querystring &field= che contiene il vero nome del campo.

Siamo arrivati al momento cruciale, cliccando su Attività comuni di Data View e poi su Proprietà visualizzazione dati, scegliamo il tab Origine dati XSLT, cliccando su sfoglia, selezionare il file xsl appena creato e fare click su OK, salvare la pagina (facendo attenzione a modificare la posizione del file che deve essere salvato nel sito stesso)

Se tutti i passaggi sono stati seguiti correttamente, dovreste trovarvi con una bella mappa che recupera i dati dalla vostra lista, effettua una ricerca ottenendo le coordinate del luogo e mette un bel pin sulla mappa.

Unico particolare che non sono riuscito a risolvere (in fondo NON sono un programmatore…) è la questione della centratura della mappa.. con questo stylsheet la centratura è fatta manualmente alla riga che riporta la funzione map.setCenter, sarebbe bello centrare automaticamente la mappa sul pin appena recuperato…. Se qualcuno ha idea di come fare mi faccia un colpo!!

Enjoy! 🙂

Annunci

2 risposte a “Google Maps & SharePoint

  1. Megapolis Cheat Tool 30 luglio 2013 alle 23:27

    I like the valuable info you provide in your articles.
    I will bookmark your weblog and check again here
    frequently. I am quite certain I’ll learn lots of new stuff right here! Good luck for the next!

  2. http://www.chirpy.info 4 agosto 2013 alle 11:39

    Thanks in favor of sharing such a good thought,
    piece of writing is fastidious, thats why i have read
    it completely

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: