CREARE MAPPE PERSONALIZZATE CON GOOGLE MAPS
09/10/2016
Google Maps è uno strumento ormai indispensabile per comunicare efficacemente posti e percorsi. Una attività (ad esempio un ristorante) che voglia indicare agli utenti la propria posizione può avvalersi di queste mappe includendole nel proprio sito web. Mappe statiche, immagini, o peggio ancora semplici indicazioni testuali non sono proprio più ammesse! Gli utenti si aspettano di trovare Google Maps e tutto quello che ne deriva ossia la possibilità di condividere il luogo, esplorare i dintorni e calcolare distanze e percorsi.
Inserire una mappa Google Maps sul proprio sito web è abbastanza semplice ma l'effetto non sempre è quello desiderato: la mappa di default è ok, indica certamente la posizione, ma i colori potrebbero non essere nello stile complessivo del sito, magari vorremmo togliere informazioni superflue quali nomi di altri posti non attinenti al contesto, nomi dei parchi, in generale semplificare la mappa e focalizzare l'attenzione su quello che vogliamo indicare.
Utilizzando le Google Maps API v3 è possibile personalizzare la mappa come più si desidera, integrandola con lo stile complessivo del sito. Ad esempio è possibile:
- cambiare tonalità di colore
- cambiare immagine degli indicatori
- disegnare contorni, cerchi, rettangoli solidi e trasparenti
- mostrare popup o altre informazioni al click di preciso luogo sulla mappa
Ecco alcuni esempi:
Creazione del layout base
Innanzitutto occorre procurarsi una API Key direttamente dal Google Developer center. La chiave ci permetterà di accedere alle funzionalità extra.
Creiamo una pagina HTML di esempio ed includiamo le Google Map API direttamente nell'head. In più creiamo un div contenente la nostra mappa, larghezza e altezza fluida (100%):
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap"></script>
</head>
<body>
<div id="maptest" style="width:100%;height:100%;"></div>
</body>
</html>La pagina non mostra ancora alcuna mappa, dobbiamo crearla associando al div il codice Javascript opportuno. Definiamo per ora il minimo indispensabile ossia posizione (latitudine e longitudine) e livello di zoom:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap"></script>
</head>
<body>
<div id="maptest" style="width:100%;height:100%;"></div>
<script>
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814)
};
var map = new google.maps.Map(
document.getElementById('maptest'),
mapOptions
);
</script>
</body>
</html>Risultato:
Che è esattamente quello che al massimo possiamo ottenere con le opzioni standard. Vediamo ora di cambiare tonalità di colore alla mappa, ad esempio portarla sul blu (tonalità #103050 e livello di saturazione 20):
var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
}];
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
};
var map = new google.maps.Map(
document.getElementById('maptest'),
mapOptions
);Risultato:
Aggiungere segnaposto (markers)
Possiamo ora aggiungere uno o più segnaposto sulla mappa, è sufficiente creare quanti oggetti marker desideriamo, specificarne latitudine e longitudine e passarli alla mappa:
var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
}];
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
};
var map = new google.maps.Map(
document.getElementById('maptest'),
mapOptions
);
// markers
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769562, 11.265814)
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769662, 11.356814)
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.799362, 11.283814)
});Risultato:
Cambiare immagine ai markers
L'icona del marker di default è noiosa. Possiamo utilizzare altre icone o immagini, basta specificare il percorso url alla png o jpeg. Una immagine personalizzata permette ad esempio di creare marker con il logo del nostro sito web, oppure marker che rappresentano posti differenti (ristoranti, stazioni di servizio, aereoporti etc..). Da notare che ogni marker può avere una immagine differente.
var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
}];
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
};
var map = new google.maps.Map(
document.getElementById('maptest'),
mapOptions
);
// markers
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769562, 11.265814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769662, 11.356814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.799362, 11.283814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});Risultato:
Associare eventi al click di un marker
Possiamo associare un particolare evento quando l'utente clicca su un marker, ad esempio mostrare un popup informativo oppure cambiare pagina o qualsiasi altra cosa. E' sufficiente aggiungere l'evento al marker tramite la funziona addListener()
var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
}];
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
};
var map = new google.maps.Map(
document.getElementById('maptest'),
mapOptions
);
// markers
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769562, 11.265814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769662, 11.356814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.799362, 11.283814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
// evento
marker3.addListener('click', function() {
alert('ok');
});Cliccando sul marker 3 comparirà un semplice popup.
Disegnare forme geometriche sulla mappa
Oltre ai marker è possibile aggiungere forme geometriche quali cerchi, rettangoli e poligoni. In particolare i cerchi sono molto utili quando occorre indicare il raggio massimo di azione di qualcosa o qualcuno (consegne a domicilio? antenna trasmettitore GSM?). Per un cerchio occorre specificare colore, raggio (in metri) e il marker da associare al cerchio (il marker identifica il centro). Nel nostro caso associamo il cerchio al marker numero 1, impostiamo il raggio a 5km e colore #ffff000.
var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
}];
var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
};
var map = new google.maps.Map(
document.getElementById('maptest'),
mapOptions
);
// markers
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769562, 11.265814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.769662, 11.356814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.799362, 11.283814),
icon: 'https://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
});
// evento
marker3.addListener('click', function() {
alert('ok');
});
// cerchio
var circle = new google.maps.Circle({
map: map,
radius: 5000,
fillColor: '#ffff00',
strokeWeight: 0,
});
circle.bindTo('center', marker1, 'position'); Risultato:
Il marker 1 identifica il centro del cerchio. Incidentalmente il marker 2 è stato incluso nel cerchio perchè si trova a meno di 5km dal marker 1. 
Rimuovere elementi superflui
Di default la mappa contiene molti elementi quali nomi di strade, posti, attività commerciali, nomi di parchi, fiumi etc.. E' possibile rimuovere selettivamente questi elementi specificandoli nell'oggetto di stile e impostando la visiblità ad OFF. Ad esempio questo è il codice, per rimuovere nomi di attività commerciali, punti di interesse, fiumi, laghi e strade:
var styleArray = [
{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#123456" }]
},
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];Risultato:
Disegnare percorsi sulla mappa
E' possibile passare alla mappa un serie di punti geografici (latitudine, longitudine) e realizzare cosi' un tracciato arbitrario. Va specificato anche il colore, lo spessore della traccia e opacità:
var pathCoords = [
{lat: 43.769562, lng: 11.265814},
{lat: 43.769362, lng: 11.303814},
{lat: 43.729362, lng: 11.253814},
{lat: 43.739362, lng: 11.223814},
{lat: 43.749362, lng: 11.203814},
{lat: 43.759362, lng: 11.273814},
{lat: 43.769362, lng: 11.243814},
{lat: 43.799362, lng: 11.283814},
];
var path = new google.maps.Polyline({
path: pathCoords,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
path.setMap(map);Risultato:
Oltre a cerchi e linee è possibile disegnare qualsiasi altra forma geometrica, aggiungere immagini e marcare bordi. Il sito ufficiale include tutorial ed esempi per trasformare e adattare le mappe in qualsiasi modo possibile!
Vedi la DEMO
Vuoi personalizzare una o più mappe Google Maps per integrarla al meglio nel tuo sito internet? Fammi sapere nei commenti oppure contattami!
Torna alla home
Complimenti Gianluca. Sito in terre santissimo ( non l ho corretto....è meraviglioso....). ...comunque veramente bello,bella l applicazione cliente,poca pubblicità. Bravo. ( ci sono arrivato cercando info sul pic16f84 per la cronaca)