API di Google MAPS

Oggi vediamo un tutorial molto interessante, che sto utilizzando spesso nei lavori che sto realizzando, parliamo delle API di google maps.Chi non ha mai visto in qualche sito la cartina di google maps, personalizzata ad hoc, per il sito in questione? Anche molti clienti della mia azienda, chiedono tale funzionalità.

Eh qui ci vengono in contro le API.

Ora vediamo le fasi + importanti per creare una mappa come questa:

Come prima cosa dobbiamo farci dare da google un codice identificativo del nostro sito, così detta “API key“, è necessario avere un account google per riceverla, e ne possiamo creare quante ne vogliamo…
dopo aver inserito nella nostra pagina il codice del’ Api key, dobbiamo creare il nostro “contenitore” della mappa, un semplice

posizionato dove vogliamo con le dimensioni Larghezza e Altezza fisse, definite da noi.

<div id="mappa" style="width:500px; height:200px;"></div>

Ora inseriamo la funzione di google maps, prima del tag oppure nella pagina in cui voi usate i javascript(in tal caso ricordatevi di richiamare la nostra funzione).

<script type="text/javascript">				
load();
function createMarker(point, label) 
    {
        var marker = new GMarker(point);
        // Crea listener per il click sull'oggetto
	GEvent.addListener(marker, "click", function() 
	{
		marker.openInfoWindowHtml(label);
	});
	return marker;
    }
 
var map = null;
var geocoder = null;
 
	function load() 
	{
	    if (GBrowserIsCompatible()) 
	    {
		$("mappa").css("display", "block");
		// Crea mappa
		map = new GMap2(document.getElementById("mappa"));
		// Creo GeoCoder Max 1.6 query/sec
		geocoder = new GClientGeocoder();
 
		document.getElementById("mappa").style.display="block";
		var map = new GMap2(document.getElementById("mappa"));
		map.setCenter(new GLatLng(46.070477,12.586706), 8); // centro 
		map.addControl(new GMapTypeControl());
		map.addControl(new GLargeMapControl());
		var point = new GLatLng(46.070477,12.586706); // 
		var marker = createMarker(point, '<div>Contenuto del tooltip</div>');
					map.addOverlay(marker);	
				}
			}       				
		</script>

Questo è il nostro codice, per ottenere il mio stesso risultato. Ora commentiamo alcune cose:
per chi “mastica” un pò di codice non dovrebbe essere complicato da capire, alcune parti, come si può notare all’inizio dello script facciamo partire la nostra funzione load(); che farà apparire la mappa nel div scelto, con la funzione

map.setCenter(new GLatLng(46.070477,12.586706), 8);

assegniamo le coordinate (latitudine e longitudine) del nostro punto per metterlo al centro della google maps e la profondità di visualizzazione, che è il punto che potete notare sul lato sinistro della google maps.

var point = new GLatLng(46.070477,12.586706);

assegniamo le effettive coordinate del punto, e le passiamo alla variabile point.
nella riga

var marker = createMarker(point, '<div>Contenuto del tooltip</div>');

chiamiamo la funzione che crea il nostro puntino(modificabile anche quello) e il contenuto del tooltip, che sarà un semplice div, dove all’interno possiamo metterci tutto il codice che vogliamo.
Prima di lasciarmi, vorrei ricordarvi 2 cose importanti la prima è che se volete che lo script funzioni senza problemi dovete utilizzare anche jquery e se volete saperne di più potete consultare la guida online dove troverete di tutto e di più sulle API di google maps.

Un veloce spunto su alcuni controlli:

// Faccio apparire i 3 pulsanti per le versioni di visualizzazione della mappa
map.addControl(new GMapTypeControl());
// Faccio apparire lo scroller per la profondità, posso anche assegnare map.addControl(new GSmallMapControl()); e avere solo il + e il -
map.addControl(new GLargeMapControl());
// Scelgo direttamente la visualizzazione ibrida della mappa
map.setMapType(G_HYBRID_MAP);
...
...
...
... ovviamente ce ne sono tante altre :)

Spero che questo tutorial vi torni utile, è uno script molto semplice ma sopratutto funzionale e di grande impatto, alla prossima.