Il vantaggio di questo approccio e' che ogni modifica effettuata da un client viene immediatamente visualizzato sugli altri client senza necessita' di aggiornare la pagina (utile quindi nel caso si voglia fare per esempio il tracking di un oggetto che si muove)
Un esempio live puo' essere provato a questo link
La struttura dati e' molto semplice: un alberi in cui ad ogni entrata sono presenti una longitudine ed una latitudine. Cliccando sulla mappa si aggiunge un nuovo nodo alla mappa
Attenzione : Firebase non conosce il tipo float per cui ci sono un po' di magheggi nel convertire i dati float da e per tipi stringhe
------------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<script type="text/javascript">
var latitudine = 0.0;
var longitudine = 0.0;
var conta = 0;
// Initialize Firebase
var config = {
apiKey: "AIzaSyAchx8oVeLUgYnGujAEfwOxxxxxxxxxxxxxxxx",
authDomain: "notifica-23xxxxxxfirebaseapp.com",
databaseURL: "https://notifica-23xxxxxfirebaseio.com",
storageBucket: "notifica-2xxxxxx.appspot.com",
messagingSenderId: "392723xxxxxxx"
};
firebase.initializeApp(config);
</script>
<script type="text/javascript">
/*
questi sono solo esempi di come si possano inserire dati in Firebase in Javascript
le righe sono commentate e quindi non in uso/
firebase.database().ref('punti/').set({
lat: 43,
lng : 11
});*/
/*
firebase.database().ref('punti/').push({
lat: 43.0,
lng : 12.0
});
firebase.database().ref('punti/').push({
lat: 42,
lng: 11
});
*/
</script>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 43,
lng: 11
},
zoom: 6,
styles: [{
featureType: 'poi',
stylers: [{
visibility: 'off'
}] // Turn off points of interest.
}, {
featureType: 'transit.station',
stylers: [{
visibility: 'off'
}] // Turn off bus stations, train stations, etc.
}],
disableDoubleClickZoom: false
});
//questa e' la funzione che all'evento click sulla mappa aggiunge il corrispondente
// punto nel database map.addListener('click', function(e) {
firebase.database().ref('punti/').push({
lat: JSON.stringify(e.latLng.lat()),
lng : JSON.stringify(e.latLng.lng())
});
var marker = new google.maps.Marker({
position: {
lat: e.latLng.lat(),
lng: e.latLng.lng()
},
map: map
});
});
//fine della funzione di inserimento
// crea un evento sull'aggiornamento dei punti
//sicuramente esiste un sistema piu' furbo di fare la stessa cosa
const dbRefPunti = firebase.database().ref().child('punti');
dbRefPunti.on('child_added',function(snap,prevChildKey)
{
var la1;
var lo1;
snap.forEach(function (snapshot) {
var obj = snapshot.val();
var nome = snapshot.key;
if (snapshot.key == "lat")
{
latitudine = JSON.stringify(obj);
la1 = obj;
console.log("latitudine : "+latitudine);
}
if (snapshot.key == "lng")
{
longitudine = JSON.stringify(obj);
lo1 = obj;
console.log("longitudine : "+longitudine);
}
conta++;
console.log("Conta : "+conta);
if (conta%2 == 0)
{
console.log("Stampa : " + latitudine+":"+longitudine);
console.log(isNaN(la1));
//var latLng = new google.maps.LatLng(parseFloat(latitudine),parseFloat(longitudine));
var latLng = new google.maps.LatLng(la1,lo1);
var marker = new google.maps.Marker({position: latLng,map: map});
}
});
}
);
// fine evento
//fine initMaps
google.maps.event.addDomListener(window, "load", initMap);
};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkeozFISVmCAB3ta1rEXvMNDDzSxxxxxxxx&callback=initMap">
</script>
</body>
</html>
------------------------
