Proseguendo la nostra panoramica sulle Api di Google Map in questo articolo vedremo come realizzare una mappa con puntatore (marker) implementando la funzionalità di “Calcola percorso” che permetterà all’utente di trovare facilmente le indicazioni stradali per raggiungere la destinazione specificata da un qualunque punto di partenza. Prima di proseguire con la lettura di questo articolo sarebbe preferibile leggere quest’altro articolo introduttivo.
1. Registrare una API key
Il primo passo da effettuare è rigistrare una chiave per il proprio dominio. Per questa procedura rimando al seguente articolo.
2. Import Google map API
Ottenuta la chiave la prima cosa che dobbiamo fare è importare le API sulla nostra pagina. A tal proposito basta inserire nel codice questa riga:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAy5MGb6ekAenysCb6jvQABBQBlhnV4cuz6vqJJD4RnEQTD9BFjxRBE8PR2TiWclvsHuX-X4dKUmmRcw" type="text/javascript"></script>
3. Lo script
Il codice seguente contiene il sorgente dello script che implementa la mappa con marker e la funzionalità “Calcola percorso”. Tale script va naturalmente aggiunto al codice della pagina web in cui intendiamo aggiungere la nostra mappa.
<script type="text/javascript">
var geocoder;
var toLatValue;
var toLngValue;
var div_percorso;
var zoom;
var marker_showed;
var markerLat;
var markerLng;
var markerInfo;
function initialize(div_id_map, div_id_percorso, latitudine, longitudine, info) {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(div_id_map));
div_percorso = document.getElementById(div_id_percorso);
markerLat = latitudine;
markerLng = longitudine;
markerInfo = info;
zoom = 16;
var latlng = new GLatLng(markerLat, markerLng);
marker_showed = false;
gdir = new GDirections(map, div_percorso);
geocoder = new GClientGeocoder();
map.setCenter(latlng, zoom);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
GEvent.addListener(gdir, "error", handleErrors);
mostraMarker();
geocoder = new GClientGeocoder();
}
}
function mostraMarker(){
var latlng = new GLatLng(markerLat, markerLng);
if(!marker_showed){
var latlngatt = new GLatLng(markerLat, markerLng);
var mar = createMarker(latlngatt, 0, markerInfo)
map.addOverlay(mar);
mar.openInfoWindowHtml(markerInfo);
marker_showed = true;
}
map.setCenter(latlng, zoom);
}
function showDirection(){
var fromStato = document.getElementById("fd_stato");
var fromProvincia = document.getElementById("fd_provincia");
var fromComune = document.getElementById("fd_comune");
var fromVia = document.getElementById("fd_via");
toLatValue = markerLat;
toLngValue = markerLng;
var address = fromVia.value + ", " + fromComune.value + ", " + fromProvincia.value +", " + fromStato.value;
geocoder.getLocations(address, showDirection2);
}
function showDirection2(response){
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Impossibile trovare l\'indirizzo specificato.");
marker_showed = false;
mostraMarker();
}else{
place = response.Placemark[0];
fromPoint = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
toPoint = new GLatLng(toLatValue, toLngValue);
setDirections2(fromPoint, toPoint);
}
}
function setDirections2(fromAddress, toAddress) {
var arr = new Array();
arr[0] = fromAddress;
arr[1] = toAddress;
gdir.loadFromWaypoints(arr, {"locale" : "it"});
marker_showed = false;
}
function createMarker(point,number, string) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(string);
});
return marker;
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
function cancella_percorso(){
gdir.clear();
mostraMarker();
}
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS){
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
}else if (gdir.getStatus().code == G_GEO_SERVER_ERROR){
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
}else if (gdir.getStatus().code == G_GEO_MISSING_QUERY){
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
}else if (gdir.getStatus().code == G_GEO_BAD_KEY){
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
}else if (gdir.getStatus().code == G_GEO_BAD_REQUEST){
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
}else {
alert("An unknown error occurred.");
}
mostraMarker();
}
</script>
Per una questione di pulizia del codice sarebbe buona norma non copiare e incollare il codice sorgente dello script direttamente nella pagina html ma scriverlo in un file .js che successivamente viene importato nel codice html.
4. La pagina HTML
Nel body della pagina html che implementerà la mappa è necessario mettere una div per la visualizzazione della mappa, una div dove stampare le indicazioni stradali e una form dove l’utente può specificare il punto di partenza dal quale calcolare il percorso.
<div id="mappa" style="width:100%;height:400px;"></div>
<form action='#mappa' onSubmit='showDirection(); return false;'>
<div style="padding-top:10px;">Scopri il percorso. inserisci di seguito il tuo punto di partenza:</div>
<div style="padding:10px;">
Stato:
<input type='text' id='fd_stato' >
Provincia:
<input type='text' id='fd_provincia' >
Comune:
<input type='text' id='fd_comune' >
Via:
<input type='text' id='fd_via' >
<input type='submit' value='Mostra percorso'>
<input type='button' value='Cancella percorso' onClick='cancella_percorso();'>
</div>
<div id="percorso">
</div>
</form>
5. window.onload
L’ultimo passo consiste nell’inserire, all’evento window.onload della pagina html, una chiamata alla funzione initialize() che ha il compito di inizializzare la mappa.
<script type="text/javascript">
window.onload = function(){
var idMap = 'mappa';
var idPercorso = 'percorso';
var latitudineMarker = 42.050733;
var longitudineMarker = 13.9219903;
var infoMarker = 'Blogink.it';
initialize("mappa", "percorso", latitudineMarker, longitudineMarker, infoMarker);
}
window.onunload = function(){
GUnload();
}
</script>
La variabile idMap deve prendere il valore che abbiamo dato all’attributo id della div nel quale vogliamo che compaia la mappa. Allo stesso modo la variabile idPercorso prende il valore dell’id della div nel quale vogliamo che vengano stampate le indicazioni stradali.
Le variabili latitudineMarker e longitudineMarker devono invece prendere le coordinate (latitudine e longitune) del punto nel quale vogliamo che appaia il nostro marker e che dunque sarà la destinazione del percorso calcolato. Per trovare facilmente le coordinate di una determinata via rimando al questo articolo. Infine nella variabile infoMarker possiamo inserire del testo che apparirà nella tipica nuvoletta che compare al click del marker.
6. Esempio
Un esempio di quanto esposto in questo articolo è visionabile qui.
