Marker su Google Maps

graceee

Marker su Google Maps

Salve,
mi interessava sapere come si fa ad inserire diversi marker su diversi punti di una mappa Google Map.

Sapreste darmi indicazioni?

graceee

Non scrivete tutti in una volta

valentina83

Ciao Graceee,
qui puoi trovare un ottimo tutorial che ti spiega passo passo come fare per inserire markers in una mappa di Google.

Spero di esserti stata utile.

graceee

Grazie mille!!

valentina83

Di niente, ci mancherebbe.

graceee

Ehm... scusa se ti disturbo ancora.. ho preso spunto anche da questo link e ce l'ho fatta:

www . deelan . com/dev/google-maps

Ora però come faccio a modificare i marker con altri simboli o magari con dei png che ho sul server?

valentina83

Bene, sono molto contenta. Se vuoi personalizzare i marker con simboli e immagini scelti da te, puoi usare Google Map Custom Marker.

Ti basterà uploadare il file che hai scelto per la personalizzazione dei marker e il programma ti restituirà il codice da inserire per personalizzare i tuoi marker.

Fammi sapere, se ti va, l'esito

graceee

E' molto bello questo servizio, solo che il codice che mi fornisce è totalmente diverso da quello che ho utilizzato io e che mi piace di piu, quindi non saprei come integrarlo.

Ti incollo il codice che ho io:

[html]

// Ottenere l'elemento della pagina chiamato "map" (il DIV) e creare la mappa utilizzandolo come contenitore.
var map = new GMap2(document.getElementById("map"));

// Aggiungere dei controlli per lo zoom e lo spostamento
map.addControl(new GSmallMapControl());

// Centrare la mappa su Roma, con uno zoom di 5
map.setCenter(new GLatLng(41.896655,12.495918), 6);
// Creare una nuova icona
var ggm = new GIcon(G_DEFAULT_ICON);
ggm.image = "my_marker.png"; //my_marker.png sarà è una tua immagine di uguali dimensioni

// Inserire l'oggetto delle opzioni in una var normale, per comodità
markerBlue = { icon:ggm };
// Creare un nuovo marker nel punto specificato con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point, markerBlue); //inserito markerBlue per la nuova icona
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}

map.addOverlay(createMarker(new GLatLng(41.896655,12.495918), "<b>Roma</b>, Italia"));
map.addOverlay(createMarker(new GLatLng(45.07,7.68), "<b>Torino</b>, Italia"));
map.addOverlay(createMarker(new GLatLng(45.5,12.24), "<b>Venezia</b>, Italia"));
}
}
//]]>
</script>
[/html]

Quello che vorrei fare adesso è solo sostituire l'immagine con una bandierina diversa piuttosto che con un marker di un altro colore. Solo che la bandierina è piu larga e quindi in automatico me la restringe.
Ho capito come dare l'ombra, devo solo capire come impostare una larghezza maggiore per l'immagine.

valentina83

Te la restringe perché devi impostarla della grandezza giusta. Apri la bandierina che hai tu con Photoshop, imposta le dimensioni corrette e ricaricala.

graceee

Il problema è che la bandierina supera di larghezza il marker che google usa di default.

valentina83

Sì, ho capito. Quello che ti consigliavo di fare è di aprire l'immagine della bandierina che hai tu e che vuoi usare. Modificarla con Photoshop e renderla della stessa dimensione del marker. Poi ricaricarla e inserirla nel codice così modificata.

graceee

L'immagine che vorrei utilizzare è questa

img707.imageshack.us/img707/8066/flagfd.png

il problema è che modificandola con photoshop, dovrei accorciare la lunghezza della parte verde, quindi diventerebbe goffa, oppure ridimensionandola in proporzione, e in questo caso diventerebbe troppo piccola.

Invece avevo visto al link che mi hai mandato tu, che il codice che ti forniscono include proprio le dimensioni del file che hai inviato, quindi è una cosa fattibile.
Vorrei solo capire come integrarla nel codice che ti ho postato sopra.

valentina83

Uhm, mannaggia allora non so come aiutarti. Mi spiace

graceee

Sei già stata gentilissima e disponibilissima. Grazie a te ho risolto il problema più grosso, ovvero quello di realizzare la mappa.

Magari qualcuno sarà in grado di dirmi che cosa devo aggiungere al codice per la modifica che mi serve.

valentina83

Bene, sono felice di averti aiutato almeno un poco.
Ciao cara