Inserimento markers su Google Maps V3

Dopo l’articolo nel quale abbiamo imparato a visualizzare una semplice Google Map V3, tentiamo di costruire qualcosa di più utile. L’esigenza potrebbe essere quella di visualizzare su di una mappa centrata una serie di punti particolari.
Con lo scopo di facilitare la comprensione dei termini utilizzati, ricordo che secondo le specifiche di Google Maps tutto ciò che può essere identificato da coordinate geografiche é definito overlay. Un particolare tipo di overlay è il marker, cioè il singolo punto sistemato su una mappa.
Nell’esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi ai luoghi dove ho abitato io e alcuni elementi della mia famiglia. Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Prima  di cominciare abbiamo bisogno delle coordinate dei punti che desideriamo visualizzare. A tale scopo o annotiamo i dati forniti dal nostro gps oppure utilizziamo applicazioni di geocoding, in grado di estrarre le coordinate da un indirizzo. Possiamo far riferimento a servizi come http://mygeoposition.com/ .

Una volta ottenuti i dati, si tratta di “passarli” al nostro codice. La scelta che ho fatto è stata quella di caricare i dati in tre vettori (array), uno per le latitudini, uno per le longitudini e uno per le descrizioni dei markers.
In fase di visualizzazione, i dati dei vettori verranno letti attraverso un ciclo iterativo for.

var i = 0;
for (i=0; i<lat[1].length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i] });
}

Il risultato lo trovate qui mentre qui sotto potete esaminare un estratto del codice usato.

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?
                 sensor=false”></script>
<script type=”text/javascript”>

function carica_variabili() {

//definizione coordinate su cui centrare la mappa
var lat_centro = “44.114773”;
var long_centro = “9.8517”;

//inizializzazione vettori
var lat = new Array();
var long = new Array();
var descr = new Array();

//popolamento vettori. Per aggiungere punti è sufficiente inserire una nuova terna di
// valori:  lat[4], long[4], descr[4] e cosi’ via

lat[0] = “44.111206”;
long[0] = “9.834749”;
descr[0] = “Qui ho abitato fino al 1990”;

lat[1] = “44.117701”;
long[1] = “9.871722”;
descr[1] = “Qui ho abitato fino al 2000”;

lat[2] = “44.113025”;
long[2] = “9.843195”;
descr[2] = “Qui abita mia zia Maria”;

lat[3] = “44.118320”;
long[3] = “9.846319”;
descr[3] = “Qui abita mia sorella”;

//Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
//modalità IBRIDA

var Opzioni = {
        zoom: 14, center: new google.maps.LatLng(lat_centro, long_centro),
        mapTypeId: google.maps.MapTypeId.HYBRID,
       scaleControl: false    }

var map = new google.maps.Map(document.getElementById(“map_canvas”), Opzioni);

//ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
//mappa

var i = 0;
for (i=0; i<lat[1].length; i++)
    {  var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat[i], long[i]),
      map: map, title: descr[i] });
    }

}
</script>
</head>

<body style=”margin:5px; padding:2px;” onload=”carica_variabili()”>

<div id=”map_canvas” style=”width: 60%; height: 60%;”></div>

</body>
</html>

Linkografia
@ Maps API V3 Overlays  (Google Code – inglese)
@ Esempio visualizzazione markers singolo (Google Code – inglese)

Annunci

16 Responses to “Inserimento markers su Google Maps V3”


  1. 1 teo71 8 febbraio 2010 alle 2:46 pm

    ciao sono matteo della mykugi
    noi lo facciamo già da più di un anno
    e con le mappature delle strade siamo arrivati prima noi di google,visto che abbiamo mappato le città italiane per seat
    ora guarda questo
    http://www.mykugi.com/?lon=10.04899&lat=45.660668&azi=320.899&alt=-9.264
    buona visione

  2. 2 Fabrizio 29 marzo 2010 alle 11:48 am

    Ciao,

    ho provato ad inserire i vettori ma dopo l’ottavo non funzionano più! sai perchè?

    Grazie

  3. 3 ciao 24 maggio 2010 alle 9:16 am

    Salve a tutti,
    ho provato lo script dell’esempio dove, però, i vettori sono creati con uno script php (si collega ad un db ricavandone i valori dei vattori), la risposta del browser sembra essere esattamente quello dell’esempio, ma non funziona. Qualcuno sa dirmi il perchè? Inserisco il codice prodotto dal browser:

    Untitled Document

    function initialize() {
    var lat_centro =”44.114773″;
    var long_centro = “9.8517”;

    var lat = new Array();
    var long = new Array();
    var descr = new Array();

    lat[0]=”14.1899379″;
    long[0]=”40.9010265″;
    descr[0]=”marco”;
    lat[1]=”14.1899379″;
    long[1]=”40.9010265″;
    descr[1]=””;
    lat[2]=”12.51048″;
    long[2]=”41.8729302″;
    descr[2]=””;
    lat[3]=”7.6864916″;
    long[3]=”45.0703999″;
    descr[3]=””;
    lat[4]=”14.7296873″;
    long[4]=”40.8936877″;
    descr[4]=””;
    lat[5]=”14.2411624″;
    long[5]=”40.8534672″;
    descr[5]=”lucio”;

    var opzioni = {
    zoom: 8; center: new google.maps.LatLng(lat_centro, long_centro),
    mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: false }

    var map = new GMap2(document.getElementById(“mappa_log”), opzioni);
    var i = 0;
    for(i=0; i<lat[1].lengt; i++)
    { var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat[i], long[i]),
    map: map, title: descr[i]});

    }

    }

    Content for id “mappa_log” Goes Here

    Vi ringrazio

  4. 4 davide 10 ottobre 2011 alle 8:52 pm

    Ciao, se volessi inserire questo codice – e visualizzare una mappa con dei markers – in una pagina/post di wordpress dove posso piazzare questo codice? e sopratutto si puo fare?
    grazie

  5. 7 Marc 6 dicembre 2011 alle 12:06 pm

    volevo semplicemente ringraziare per il tutorial 🙂

  6. 9 pompeo 24 gennaio 2012 alle 10:59 am

    ciao
    ti ringrazio per il tutorial e approfitto per porti chiederti come è possibile avere icone diverse sulle diverse posizioni?
    potresti indicarmi qualche esempio?

    grazie

  7. 11 Leonardo Bellotti 7 febbraio 2012 alle 5:37 pm

    Ciao Cirdan, come posso contattarti in privato?

  8. 12 Davide Melle 1 marzo 2012 alle 8:26 pm

    vorrei segnalare un piccolo errore nello script, il ciclo for utilizza come riferimento lat[1].length, ovvero la lunghezza dell’elemento 1 del vettore lat, il controllo invece va fatto sulla lunghezza del vettore stesso, quindi lat.length

  9. 13 Stefano 24 maggio 2012 alle 5:17 pm

    Sale a tutti. Per caso c’è un limite di rappresentazione dei Marker. Inserendo un array ho notato che al massimo visualizza 150 Marker. Vi risulta?
    Grazie

  10. 15 Mik 9 ottobre 2012 alle 2:47 pm

    l’esempio non funziona perchè ci sono dei caratteri speciali e una definizione di variabile fuori posto. Lo script corretto è:

    function carica_variabili() {

    //definizione coordinate su cui centrare la mappa
    var lat_centro = “44.114773”;
    var lng_centro = “9.8517”;

    //inizializzazione vettori
    var lat = new Array();
    var lng = new Array();
    var descr = new Array();

    //popolamento vettori. Per aggiungere punti è sufficiente inserire una nuova terna di
    // valori: lat[4], lng[4], descr[4] e cosi’ via

    lat[0] = “44.111206”;
    lng[0] = “9.834749”;
    descr[0] = “Qui ho abitato fino al 1990”;

    lat[1] = “44.117701”;
    lng[1] = “9.871722”;
    descr[1] = “Qui ho abitato fino al 2000”;

    lat[2] = “44.113025”;
    lng[2] = “9.843195”;
    descr[2] = “Qui abita mia zia Maria”;

    lat[3] = “44.118320”;
    lng[3] = “9.846319”;
    descr[3] = “Qui abita mia sorella”;

    //Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
    //modalità IBRIDA
    var Opzioni = {
    zoom: 14, center: new google.maps.LatLng(lat_centro, lng_centro),
    mapTypeId: google.maps.MapTypeId.HYBRID,
    scaleControl: false }

    var map = new google.maps.Map(document.getElementById(“map_canvas”), Opzioni);

    //ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
    //mappa

    var marker = null;
    var i = 0;
    for (i=0; i<lat.length; i++) {
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat[i], lng[i]),
    map: map, title: descr[i] });
    }

    }

  11. 16 Valter 21 novembre 2014 alle 12:45 pm

    Ciao so che ormai l’articolo è vecchiotto 😉
    posso chiederti come inseriresti una infowindow in questa pagina?

    ho provato a inserire questa parte nella pagina ma mi fa visualizzare solo una posizione le altre spariscono.

    Pe prima cosa ho aggiunto una nuova variabile:

    lat[0] = “44.111206”;
    lng[0] = “9.834749”;
    descr[0] = “Qui ho abitato fino al 1990”;
    box[0] = “Testo della nuvoletta”

    E poi ho aggiunto questo:

    //ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su mappa

    var i = 0;
    for (i=0; i<lat.length; i++) {
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat[i], lng[i]),
    map: map,
    title: descr[i] });

    var infowindow = new google.maps.InfoWindow({
    content: box[i]
    });
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });

    google.maps.event.addDomListener(window, 'load', initialize);

    }

    }


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...




Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos


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