Come Aggiungere Google Maps al Proprio Sito Web
Sempre più spesso nascono siti web utilizzati per promuovere la propria attività come un negozio. In questi casi può essere molto utile aggiungere al sito una mappa stradale che indica la posizione esatta del proprio negozio per far si che l’utente sappia dove recarsi.
Sembra una cavolata ma le mappe stradali sono molto utili dato che l’utente medio preferisce sempre recarsi in un posto facilmente raggiungibile e una cartina aiuta a trovarlo subito.
Esistono parecchi servizi che offrono ciò e certamente Google Maps è il migliore.
Creare una mappa con Google Maps è un operazione facile e veloce:
- Recatevi a questo indirizzo per ottenere una Key. Inserire in basso il vostro dominio e accettate le condizioni di utilizzo. Non preoccupatevi è tutto gratis.
- Ora inseriamo tra i tag il seguente codice:
<script src="http://maps.google.com/maps?
file=api&v=2&key=PROPRIAKEY"
type="text/javascript"></script>
Dove PROPRIAKEY deve essere sostituito con la key data nel punto.
- Recatevi su Addressfix e calcolate le cordinate del vostro negozio. Poi inserite sotto al codice precedente questo:
<script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(latitudine, longitudine), numero); } } </script">
Dove latitudine e longitudine vanno sostituiti con le cordinate precedentemente ottenute. Sostituire numero invece con il tasso di zoom che si vuole (da 0 a 17).
- A questo punto bisogna inserire un segnale che indichi dove si trova la vostra attività quindi sotto a map.setCenter(new GLatLng(latitudine, longitudine), numero) inserite:
function createMarker(point, description) { var marker = new GMarker(point); GEvent.addListener(marker, "mouseover",function() { marker.openInfoWindowHtml(description); }); return marker; } // Aggiungi il marker alla mappa map.addOverlay( createMarker(new GLatLng(lat, long),"Il negozio è in Via, Numero Civico Codice ostale, Città") );
Dove le parti in grassetto vanno sostituite.
- Inseriamo al posto del body: <body onload=”load()”
onunload=”GUnload()”>
- Per finire inserite il codice seguente che servirà per far comparire la mappa:
<div id=”map”> </div>
Spero di essere stato utile.
Loading ...