internet professionali ed è programmatore php.
Progetta e realizza siti web in Bari e provincia.
[22-12-2009] - Parsare un Feed RSS con PHP e la classe SimpleXML()
[21-12-2009] - Utilizzare le API di Google Maps nel proprio sito
[24-10-2009] - Gestire l'UAC di Vista da registro di sistema
21 Dicembre 2009
Utilizzare le API di Google Maps nel proprio sito
Oggi per la prima volta mi è capitato di utilizzare e API di Google Maps per inserire una mappa nella classica pagina "Dove Siamo".
Vi illustro dunque i passi base per effettuare questa semplice operazione.
Prima di tutto occorre abilitare il sito all'utilizzo di Google Maps. Per fare questo portatevi su questo indirizzo ed inserite l'URL del vostro sito. Lanciato il form otterrette il codice e dei link ad alcuni esempi di utilizzo.
Fatto questo possiamo procedere all'inserimento vero e proprio.
Apriamo il file HTML in cui si vuole inserire la mappa e tra i tag <head></head> inseriamo questo codice javaScript
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=CODICE-FORNITO-DA-GOOGLE" type="text/javascript"></script>
<script type="text/javascript">
function initialize(){
if (GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map_canvas"));
var latlng = new GLatLng(45.700311, 9.013092);
map.setCenter(new GLatLng(latlng), 13);
var marker = new GMarker(latlng);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml('DESCRIZIONE DEL MARKER');});
}
}
</script>
Mediante il codice appena visto poniamo le basi per l'inserimento della mappa nella nostra pagina.
Le uniche modifiche da apportare riguardano:
- l'inserimento del codice fornito da google;
- le coordinate del vostro indirizzo che potete ricavarvi da questo sito
- il livello di zoom sul punto d'interesse, modificabile sostituendo al numero 13 un valore compreso tra 0 e 17 (rispettivamente minimo e massimo)
- la descrizione del marker andando a sostituire la stringa in maiuscolo.
Occorre ora modificare il tag <body> della pagina con il seguente:
<body onload="initialize()" onunload="GUnload()">
Ed infine inserire, nel punto in cui si vuol mostrare la mappa questo codice:
<div id="map_canvas" style="width: 565px; height: 424px"></div>
Commenti
Pizzeria da Gianni
Realizzazione completa poggiandosi su Wordpress, modifica di alcuni plugin utilizzati, modifica codice jQuery.
Ciao Vito, noto che hai dato una rinfrescata al sito! Bravissimo :)
Vuoi lasciare anche tu un messaggio o vedere gli altri commenti?
