Home / Programmazione / Javascript - AJAX / Usare Google Maps con Javascript
Mattepuffo

Usare Google Maps con Javascript

Usare Google Maps con Javascript

Google ha messo a disposizione le API per Maps per diversi linguaggi.

Usare Maps con Javascript è però di sicuro più semplice che con PHP o Asp.

Vediamo quindi come caricare una mappa attraverso JS.

Prima di tutto inserite dentro la pagina un div vuoto, con un id e con una dimensione fissa (non basta dargli 100% in altezza e larghezza):

<div id="map_canvas"></div>

(Lo stile l'ho impostato nel css; bastano le proprietà width e heigth).

Questa sarà il div che conterrà la mappa.

Il secondo passo è richiamare nell'head della pagina le API:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script>

Il parametro sensor serve per usare i sensori (degli apparecchi che ce li hanno ovviamente).

Io ho impostato anche la lingua; volendo ci sono altri parametri.

Passiamo adesso allo script minimo per caricare la mappa:

<script type="text/javascript">
var init = function () {
var latlng = new google.maps.LatLng(41.826694,12.583593);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
window.onload = init;
</script>

Creiamo una nuova istanza di maps.LatLng passandogli latitudine e longitudine.

Creiamo un array di opzioni che ci interessano:

  • lo zoom
  • dove centrare la mappa
  • il tipo di mappa

Poi creiamo un nuovo oggetto Map passando due parametri: il div che dovrà contenere la mappa e le opzioni.

Alla fine gli diciamo di caricare la funzione in avvio di pagina.

Questo è il minimo per caricare una mappa.

Però non ci accontentiamo e aggiungiamo qualcos'altro.

La parima cosa da fare è aggiungere un marker, e cioè l'icona che ti dice dove sei:

<script type="text/javascript">
var init = function () {
var latlng = new google.maps.LatLng(41.826694,12.583593);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker(
{
position: latlng,
map: map
}
);
}
window.onload = init;
</script>

Il tutto lo facciamo con Marker, al quale indichiamo dove posizionare il marker e la mappa.

Infine aggiungiamo un'altra funzione secondo me fondamentale: la nuvoletta al click sul marker che di un pò di info utili:

<script type="text/javascript">
var init = function () {
var latlng = new google.maps.LatLng(41.826694,12.583593);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker(
{
position: latlng,
map: map
}
);
var tooltip = '<div id="tooltip">'+
'<p><strong>Ciao</strong><br/>'+
'Via di Javascript122, 00100Roma<br/>'+
'06/12345678<br/>'+
'<a href="http://www.mattepuffo.it>mattepuffo.it</a>"' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: tooltip
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
window.onload = init;
</script>

La variabile tooltip imposta un pò di codice HTML per scrivere quelle che volete (potete dare al codice lo stile che volete tramite CSS).

Dopo di che creiamo un oggetto InfoWindow passndogli tooltip come contenuto.

Infine creaimo un evento in modo che il tooltip si apra al click del mouse sul marker, indicando anche la mappa dove si deve aprire.

Ci sono tantissime opzioni da scoprire.

Vi posto due link utili: