API JavaScript

Alberto Ferrari
Ingegneria dell'Informazione, UniPR

Google Maps

  • Google Maps è un servizio che consente
    • ricerca e visualizzazione di mappe geografiche di buona parte della Terra
    • ricerca di servizi in particolari luoghi (ristoranti, monumenti, negozi)
    • ricerca di un possibile percorso stradale tra due punti
    • visualizzazione di foto satellitari di molte zone con diversi gradi di dettaglio (le foto sono statiche, non in tempo reale)
    • ricerca di attività̀ commerciali

Storia

  • Nel 2005 il servizio era disponibile per i browser Internet Explorer e Mozilla Firefox, il supporto per Opera e Safari fu aggiunto in seguito
  • Nel 2006 viene aggiornato per usare lo stesso database con le immagini satellitari di Google Earth
    • vengono aggiunte le mappe di Marte
    • viene rilasciata la seconda versione delle API
    • viene lanciato Google Maps per le imprese.
  • Dal 2012 l'applicazione per dispositivi mobili Google Maps è disponibile anche sull'App Store di Apple dopo che il servizio fu rimosso dalla versione 6 del sistema operativo iOS

API

  • API (Application programming interface)
  • Insieme di librerie software disponibili in un certo linguaggio di programmazione per interfacciarsi con un ambiente software
  • Framework (librerie di funzioni o di classi)

Google APIs

  • Google APIs è un insieme di API sviluppato da Google che permette lo scambio di informazioni coi Google Services e l'integrazione con altri servizi
  • API per i servizi di Ricerca, Gmail, Traduzione, Google Maps
  • Possiamo per esempio integrare le mappe google all'interno di un sito web

Strumenti necessari

  • Le Google Maps JavaScript API operano in un contesto comprendente codice
    • HTML
    • CSS
    • JavaScript
  • Necessario un editor testuale
    • es. Atom (https://atom.io/)
    • es. Notepad++ (https://notepad-plus-plus.org/)
  • Le pagine HTML saranno utilizzate in locale o memorizzate in un server web
    • es. Altervista (http://it.altervista.org/)

Accesso a Google APIs

  • Necessario account Google (solo per applicazioni con molte richieste)
  • http://code.google.com/apis
  • Credentials
  • API Key for browser
  • attivare Google Maps JavaScript API v3
  • https://developers.google.com/maps/documentation/javascript/

Esempio 1 (semplice visualizzazione mappa)

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(44.798362,10.325544),
    zoom:18,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body><div id="googleMap" style="width:800px;height:600px;"></div></body>
</html>

Elementi dell'esempio

  • Inclusione nell'header del documento delle API JavaScript di google maps
<script src="http://maps.googleapis.com/maps/api/js"></script>
  • Inserimento nel body di un elemento per contenere la mappa
<body>
  <div id="googleMap" style="width:800px;height:600px;"></div>
</body>

Elementi dell'esempio (segue)

  • Funzione di inizializzazione della mappa
    • definizione delle caratteristiche della mappa mapProp
    • assegnazione della mappa all'elemento html creato new ...
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(44.798362,10.325544),
    zoom:18,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

Elementi dell'esempio (segue)

  • Associazione della funzione all'evento onload della pagina
google.maps.event.addDomListener(window, 'load', initialize);

Codice dell'esempio

Esempio 02

più mappe sulla stessa pagina

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(44.798362,10.325544),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapProp2 = {
    center: new google.maps.LatLng(44.798362,10.325544),
    zoom:12,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
  var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
}

Elementi dell'esempio

  • Proprietà delle singole mappe
    • center coordinate del centro
    • zoom livello di zoom (da 0 a oltre 20)
    • MepTypeId.xxx tipo di mappa (ROADMAP, SATELLITE ...)
  • Associazione con vari elementi della pagina

Codice dell'esempio

Esempio 03

posizionamento di marker sulla mappa

var marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE,
  icon:'photo.jpg'
  });

marker.setMap(map);
  • icon per la scelta del marker (se non standard)
  • animation se si vuole impostare una animazione

Codice dell'esempio

Esempio 04

linee sulla mappa

var centroMappa=new google.maps.LatLng(44.801215, 10.328899);
var dii=new google.maps.LatLng(44.765774, 10.308490);
var cisita=new google.maps.LatLng(44.798362,10.325544);
...
var mioPercorso=[dii,cisita,duomo,stadio,dii];

var mioCammino=new google.maps.Polyline({
  path:mioPercorso,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

mioCammino.setMap(map);

Codice dell'esempio

Esempio 05

finestra di informazioni sui marker

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content:"CISITA Parma"
  });

infowindow.open(map,marker);

Codice dell'esempio

Esempio 06

gestione eventi

// Zoom +1 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(map.getZoom()+1);
  map.setCenter(marker.getPosition());
});
  • addListener aggiunge la funzione qui specificata function() {} all'evento 'click' sul marker
  • getZoom() restituisce il livello di Zoom
  • setZoom(n) imposta il livello di Zoom
  • setCenter(pos) imposta la posizione del nuovo centro della mappa

Codice dell'esempio

Esempio 07

altro esempio di gestione eventi

var infowindow = new google.maps.InfoWindow({
  content:"Voi siete qui"
  });

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});
  • finestra di informazione infoWindows associata al click sul marker

Codice dell'esempio

Esempio 08

evento sulla mappa

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitudine: ' + location.lat() + '<br>Longitudine: ' + location.lng()
  });
  infowindow.open(map,marker);
}

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});

Codice dell'esempio

Esempio 09

Streetview

var panorama;
function initialize() {
  panorama = new google.maps.StreetViewPanorama(
  document.getElementById('street-view'),
  {
    position: {lat: 44.798362, lng: 10.325544},
    pov: {heading: 165, pitch: 0},
    zoom: 1
  });
}

Codice dell'esempio

Geocoding

  • Geocoding è il processo di conversione di indirizzi in coordinate geografiche
function converti(){
  var geocoder = new google.maps.Geocoder();
  var indirizzoStringa = "Parma, Italia";
  geocoder.geocode({'address': indirizzoStringa}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      var locazione = results[0].geometry.location;
      alert(indirizzoStringa+" lat: "+locazione.lat()+" long: "+locazione.lng());
    } else {
      alert('Problemi di geocoding: ' + status);
    }
  });
}

Codice dell'esempio

Reverse Geocoding

  • Reverse geocoding è il processo di conversione da coordinate geografiche a indirizzi human-readable

Codice dell'esempio

Reverse Geocoding

function geocodeLatLng() {
  var geocoder = new google.maps.Geocoder;
  var coordString = "44.798362,10.325544";
  var coordArray = coordString.split(',', 2);
  var coord = {lat: parseFloat(coordArray[0]), lng: parseFloat(coordArray[1])};
  // var coord = {lat: 44.798362, lng: 10.325544}
  geocoder.geocode({'location': coord}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        indirizzo = results[1].formatted_address;
        alert (coordString + " coordinate di: " + indirizzo);
      } else {
        window.alert('Nessun risultato trovato');
      }
    } else {
      window.alert('Errore geocoder: ' + status);
    }
  });
}

Ricerca luoghi in un intorno della mappa

  • Nell'esempio ricerca dei parcheggi in un intorno di 1000 metri dal centro mappa
  • Per i tipi di luoghi: (https://developers.google.com/places/supported_types)
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
  location: centroMappa,
  radius: 1000,
  types: ['parking']
}, callback);

Codice dell'esempio

Calcolo distanza: Distace Matrix

Esercitazione 01

  • Realizzare una pagina html con una mappa di dimensioni 800x600 pixel centrata su Roma con livello di zoom 12.
  • Cliccando col mouse in un punto della mappa questo deve diventare il centro della stessa.
  • Consultare i reference:

Classi, attributi, metodi

Eventi

Esercitazione 02

  • Modificare la pagina dell'esercizio precedente aggiungendo caratteristiche e comportamenti a propria scelta (preferibilmente non visti negli esempi)

Esercitazione 03

  • Realizzare una pagina HTML che contiene un form con un campo di testo 'indirizzo', un campo di testo 'latitudine', un campo di testo 'longitudine' e un bottone 'converti' che converte l'indirizzo in coordinate e le visualizza

Esercitazione 04

  • Realizzare una pagina HTML che contiene un form con un campo di testo 'indirizzo', un campo di testo 'latitudine', un campo di testo 'longitudine' e un bottone 'converti' che converte le coordinate e visualizza l'indirizzo corrispondente

Esercitazione 05

  • Si vuole realizzare il sito web di una azienda o di una associazione o di un circolo
  • Utilizzare le GoogleMap APIs per realizzare funzioni utili per le finalità del sito

Riferimenti

Alberto Ferrari
Ingegneria dell'Informazione, UniPR
www.ce.unipr.it/~aferrari/