Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Gemeinsame Bearbeitung von Karten in Echtzeit mit Firebase

Übersicht

In dieser Anleitung erfahren Sie, wie Sie mit der Firebase-Anwendungsplattform eine interaktive Karte erstellen können. Klicken Sie unten auf der Karte auf verschiedene Orte, um eine Heatmap zu erstellen.

Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte in dieser Anleitung benötigen.

/**
* Reference to Firebase database.
* @const
*/
var firebase = new Firebase('https://fire-map-tutorial.firebaseio.com/');

/**
* Data object to be written to Firebase.
*/
var data = {
  sender: null,
  timestamp: null,
  lat: null,
  lng: null
};

function makeInfoBox(controlDiv, map) {
  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '2px';
  controlUI.style.marginBottom = '22px';
  controlUI.style.marginTop = '10px';
  controlUI.style.textAlign = 'center';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '100%';
  controlText.style.padding = '6px';
  controlText.textContent = 'The map shows all clicks made in the last 10 minutes.';
  controlUI.appendChild(controlText);
}

/**
* Starting point for running the program. Authenticates the user.
* @param {function()} onAuthSuccess - Called when authentication succeeds.
*/
function initAuthentication(onAuthSuccess) {
  firebase.authAnonymously(function(error, authData) {
    if (error) {
      console.log('Login Failed!', error);
    } else {
      data.sender = authData.uid;
      onAuthSuccess();
    }
  }, {remember: 'sessionOnly'});  // Users will get a new id for every session.
}

/**
 * Creates a map object with a click listener and a heatmap.
 */
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 3,
    styles: [{
      featureType: 'poi',
      stylers: [{ visibility: 'off' }]  // Turn off POI.
    },
    {
      featureType: 'transit.station',
      stylers: [{ visibility: 'off' }]  // Turn off bus, train stations etc.
    }],
    disableDoubleClickZoom: true,
    streetViewControl: false,
  });

  // Create the DIV to hold the control and call the makeInfoBox() constructor
  // passing in this DIV.
  var infoBoxDiv = document.createElement('div');
  makeInfoBox(infoBoxDiv, map);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);

  // Listen for clicks and add the location of the click to firebase.
  map.addListener('click', function(e) {
    data.lat = e.latLng.lat();
    data.lng = e.latLng.lng();
    addToFirebase(data);
  });

  // Create a heatmap.
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: [],
    map: map,
    radius: 16
  });

  initAuthentication(initFirebase.bind(undefined, heatmap));
}

/**
 * Set up a Firebase with deletion on clicks older than expirySeconds
 * @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
 * which points are added from Firebase.
 */
function initFirebase(heatmap) {

  // 10 minutes before current time.
  var startTime = new Date().getTime() - (60 * 10 * 1000);

  // Reference to the clicks in Firebase.
  var clicks = firebase.child('clicks');

  // Listener for when a click is added.
  clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
    function(snapshot) {

      // Get that click from firebase.
      var newPosition = snapshot.val();
      var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
      var elapsed = new Date().getTime() - newPosition.timestamp;

      // Add the point to  the heatmap.
      heatmap.getData().push(point);

      // Requests entries older than expiry time (10 minutes).
      var expirySeconds = Math.max(60 * 10 * 1000 - elapsed, 0);
      // Set client timeout to remove the point after a certain time.
      window.setTimeout(function() {
        // Delete the old point from the database.
        snapshot.ref().remove();
      }, expirySeconds);
    }
  );

  // Remove old data from the heatmap when a point is removed from firebase.
  clicks.on('child_removed', function(snapshot, prevChildKey) {
    var heatmapData = heatmap.getData();
    var i = 0;
    while (snapshot.val().lat != heatmapData.getAt(i).lat()
      || snapshot.val().lng != heatmapData.getAt(i).lng()) {
      i++;
    }
    heatmapData.removeAt(i);
  });
}

/**
 * Updates the last_message/ path with the current timestamp.
 * @param {function(Date)} addClick After the last message timestamp has been updated,
 *     this function is called with the current timestamp to add the
 *     click to the firebase.
 */
function getTimestamp(addClick) {
  // Reference to location for saving the last click time.
  var ref = firebase.child('last_message/' + data.sender);

  ref.onDisconnect().remove();  // Delete reference from firebase on disconnect.

  // Set value to timestamp.
  ref.set(Firebase.ServerValue.TIMESTAMP, function(err) {
    if (err) {  // Write to last message was unsuccessful.
      console.log(err);
    } else {  // Write to last message was successful.
      ref.once('value', function(snap) {
        addClick(snap.val());  // Add click with same timestamp.
      }, function(err) {
        console.warn(err);
      });
    }
  });
}

/**
 * Adds a click to firebase.
 * @param {Object} data The data to be added to firebase.
 *     It contains the lat, lng, sender and timestamp.
 */
function addToFirebase(data) {
  getTimestamp(function(timestamp) {
    // Add the new timestamp to the record data.
    data.timestamp = timestamp;
    var ref = firebase.child('clicks').push(data, function(err) {
      if (err) {  // Data was not written to firebase.
        console.warn(err);
      }
    });
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" async defer></script>
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
    <script>
      /**
      * Reference to Firebase database.
      * @const
      */
      var firebase = new Firebase('https://fire-map-tutorial.firebaseio.com/');

      /**
      * Data object to be written to Firebase.
      */
      var data = {
        sender: null,
        timestamp: null,
        lat: null,
        lng: null
      };

      function makeInfoBox(controlDiv, map) {
        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        controlUI.style.borderRadius = '2px';
        controlUI.style.marginBottom = '22px';
        controlUI.style.marginTop = '10px';
        controlUI.style.textAlign = 'center';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = 'rgb(25,25,25)';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '100%';
        controlText.style.padding = '6px';
        controlText.textContent = 'The map shows all clicks made in the last 10 minutes.';
        controlUI.appendChild(controlText);
      }

      /**
      * Starting point for running the program. Authenticates the user.
      * @param {function()} onAuthSuccess - Called when authentication succeeds.
      */
      function initAuthentication(onAuthSuccess) {
        firebase.authAnonymously(function(error, authData) {
          if (error) {
            console.log('Login Failed!', error);
          } else {
            data.sender = authData.uid;
            onAuthSuccess();
          }
        }, {remember: 'sessionOnly'});  // Users will get a new id for every session.
      }

      /**
       * Creates a map object with a click listener and a heatmap.
       */
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 0, lng: 0},
          zoom: 3,
          styles: [{
            featureType: 'poi',
            stylers: [{ visibility: 'off' }]  // Turn off POI.
          },
          {
            featureType: 'transit.station',
            stylers: [{ visibility: 'off' }]  // Turn off bus, train stations etc.
          }],
          disableDoubleClickZoom: true,
          streetViewControl: false,
        });

        // Create the DIV to hold the control and call the makeInfoBox() constructor
        // passing in this DIV.
        var infoBoxDiv = document.createElement('div');
        makeInfoBox(infoBoxDiv, map);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);

        // Listen for clicks and add the location of the click to firebase.
        map.addListener('click', function(e) {
          data.lat = e.latLng.lat();
          data.lng = e.latLng.lng();
          addToFirebase(data);
        });

        // Create a heatmap.
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: [],
          map: map,
          radius: 16
        });

        initAuthentication(initFirebase.bind(undefined, heatmap));
      }

      /**
       * Set up a Firebase with deletion on clicks older than expirySeconds
       * @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
       * which points are added from Firebase.
       */
      function initFirebase(heatmap) {

        // 10 minutes before current time.
        var startTime = new Date().getTime() - (60 * 10 * 1000);

        // Reference to the clicks in Firebase.
        var clicks = firebase.child('clicks');

        // Listener for when a click is added.
        clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
          function(snapshot) {

            // Get that click from firebase.
            var newPosition = snapshot.val();
            var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
            var elapsed = new Date().getTime() - newPosition.timestamp;

            // Add the point to  the heatmap.
            heatmap.getData().push(point);

            // Requests entries older than expiry time (10 minutes).
            var expirySeconds = Math.max(60 * 10 * 1000 - elapsed, 0);
            // Set client timeout to remove the point after a certain time.
            window.setTimeout(function() {
              // Delete the old point from the database.
              snapshot.ref().remove();
            }, expirySeconds);
          }
        );

        // Remove old data from the heatmap when a point is removed from firebase.
        clicks.on('child_removed', function(snapshot, prevChildKey) {
          var heatmapData = heatmap.getData();
          var i = 0;
          while (snapshot.val().lat != heatmapData.getAt(i).lat()
            || snapshot.val().lng != heatmapData.getAt(i).lng()) {
            i++;
          }
          heatmapData.removeAt(i);
        });
      }

      /**
       * Updates the last_message/ path with the current timestamp.
       * @param {function(Date)} addClick After the last message timestamp has been updated,
       *     this function is called with the current timestamp to add the
       *     click to the firebase.
       */
      function getTimestamp(addClick) {
        // Reference to location for saving the last click time.
        var ref = firebase.child('last_message/' + data.sender);

        ref.onDisconnect().remove();  // Delete reference from firebase on disconnect.

        // Set value to timestamp.
        ref.set(Firebase.ServerValue.TIMESTAMP, function(err) {
          if (err) {  // Write to last message was unsuccessful.
            console.log(err);
          } else {  // Write to last message was successful.
            ref.once('value', function(snap) {
              addClick(snap.val());  // Add click with same timestamp.
            }, function(err) {
              console.warn(err);
            });
          }
        });
      }

      /**
       * Adds a click to firebase.
       * @param {Object} data The data to be added to firebase.
       *     It contains the lat, lng, sender and timestamp.
       */
      function addToFirebase(data) {
        getTimestamp(function(timestamp) {
          // Add the new timestamp to the record data.
          data.timestamp = timestamp;
          var ref = firebase.child('clicks').push(data, function(err) {
            if (err) {  // Data was not written to firebase.
              console.warn(err);
            }
          });
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

Erste Schritte

Mit dem Code in dieser Anleitung können Sie Ihre eigene Version der Firebase-Karte entwickeln. Erstellen Sie hierfür zunächst eine neue Datei in einem Texteditor und speichern Sie diese mit dem Namen index.html.

Lesen Sie die folgenden Abschnitte, um den Code zu verstehen, den Sie dieser Datei hinzufügen können.

Erstellen einer Basiskarte

In diesem Abschnitt wird der Code erläutert, mit dem eine Basiskarte eingerichtet wird. Dieses Verfahren kann der Vorgehensweise ähneln, mit der Sie Karten bei den ersten Schritten mit der Google Maps JavaScript API erstellt haben.

Kopieren Sie den nachstehenden Code in Ihre Datei index.html. Mit diesem Code wird die Google Maps JavaScript API geladen und die Karte im Vollbildmodus dargestellt. Außerdem wird die Visualisierungsbibliothek geladen, die Sie später in der Anleitung benötigen, um eine Heatmap zu erstellen.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
        &libraries=visualization&callback=initMap">
    </script>

    /**
     * The JavaScript code that creates the firebase map goes between the empty script tags below.
     */
    <script>firebasemap.js</script>

  </body>
</html>

Klicken Sie im Codebeispiel auf YOUR_API_KEY oder befolgen Sie die Anleitung zum Anfordern eines API-Schlüssels. Ersetzen Sie YOUR_API_KEY durch den API-Schlüssel Ihrer Anwendung.


In den folgenden Abschnitten wird der JavaScript-Code erklärt, mit dem die Firebase-Karte erstellt wird. Sie können den Code kopieren und in der Datei firebasemap.js speichern und wie nachfolgend dargestellt zwischen den Script-Tags darauf verweisen.

<script>firebasemap.js</script>
Alternativ können Sie den Code wie im vollständigen Beispielcode am Anfang dieser Anleitung direkt zwischen den Script-Tags einfügen.

Fügen Sie den nachstehenden Code zur Datei firebasemap.js oder zwischen den leeren Script-Tags der Datei index.html hinzu. Dies ist der Einstiegspunkt, mit dem das Programm ausgeführt wird, indem eine Funktion erstellt wird, die das Kartenobjekt initialisiert.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 3,
    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: true
  });
}

Damit diese klickbare Heatmap einfacher zu verwenden ist, werden Points of Interest und Bahnhöfe (bei denen ein Info-Fenster angezeigt wird, wenn darauf geklickt wird) durch den obigen Code deaktiviert. Außerdem wird das Zoomen beim Doppelklicken deaktiviert, um versehentliches Zoomen zu verhindern. Lesen Sie die Dokumentation, um weitere Informationen zu Kartenfunktionen zu erhalten.

Nachdem die API vollständig geladen wurde, führt der Parameter „callback“ im nachstehenden Script-Tag die Funktion initMap() in der HTML-Datei aus.

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
    &libraries=visualization&callback=initMap">

Fügen Sie den folgenden Code hinzu, um das Textsteuerelement im oberen Bereich der Karte zu erstellen.

  function makeInfoBox(controlDiv, map) {
    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.borderRadius = '2px';
    controlUI.style.marginBottom = '22px';
    controlUI.style.marginTop = '10px';
    controlUI.style.textAlign = 'center';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '100%';
    controlText.style.padding = '6px';
    controlText.innerText = 'The map shows all clicks made in the last 10 minutes.';
    controlUI.appendChild(controlText);
  }

Fügen Sie den folgenden Code in der Funktion initMap nach var map hinzu, um das Textsteuerelement zu laden.

  // Create the DIV to hold the control and call the makeInfoBox() constructor
  // passing in this DIV.
  var infoBoxDiv = document.createElement('div');
  var infoBox = new makeInfoBox(infoBoxDiv, map);
  infoBoxDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);
Jetzt ausprobieren

Öffnen Sie die Datei index.html in einem Webbrowser, um die durch den Code erstellte Google-Karte zu öffnen.

Einrichten von Firebase

Damit diese Anwendung von mehreren Personen gemeinsam genutzt werden kann, müssen Sie die Klicks in einer externen Datenbank speichern, auf die alle Nutzer zugreifen können. Die Firebase-Echtzeitdatenbank eignet sich für diesen Zweck und es sind keinerlei SQL-Kenntnisse erforderlich.

Registrieren Sie sich zuerst für ein kostenloses Firebase-Konto. Falls Sie neu bei Firebase sind, wird eine neue App mit dem Namen „My First App“ angezeigt. Wenn Sie eine neue App erstellen, können Sie einen neuen Namen und eine benutzerdefinierte Firebase-URL mit der Endung firebaseIO.com dafür festlegen. Angenommen, Sie geben Ihrer App den Namen „Jane's Firebase Map“ mit der URL https://janes-firebase-map.firebaseIO.com. Diese URL können Sie verwenden, um die Datenbank mit Ihrer JavaScript-Anwendung zu verknüpfen.

Fügen Sie die nachstehende Zeile hinter den <head>-Tags der HTML-Datei hinzu, um die Firebase-Bibliothek zu importieren.

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

Fügen Sie der JavaScript-Datei die folgende Zeile hinzu:

var firebase = new Firebase("<Your Firebase URL here>");

Speichern von Klickdaten in Firebase

In diesem Abschnitt wird der Code erläutert, mit dem in Firebase Daten zu Mausklicks auf der Karte gespeichert werden.

Für jeden Mausklick auf der Karte wird mit dem folgenden Code ein globales Datenobjekt erstellt, dessen Informationen in Firebase gespeichert werden. In diesem Objekt werden Daten wie der Wert „latLng“ und der Zeitstempel des Klicks sowie eine eindeutige ID des Browsers, in dem der Klick erstellt wurde, erfasst.

/**
 * Data object to be written to Firebase.
 */
var data = {
  sender: null,
  timestamp: null,
  lat: null,
  lng: null
};

Mit dem folgenden Code wird eine eindeutige Sitzungs-ID für jeden Klick erstellt. Dadurch lässt sich der Umfang des Datenverkehrs auf der Karte unter Einhaltung der Sicherheitsregeln von Firebase einfacher steuern.

/**
 * Starting point for running the program. Authenticates the user.
 * @param {function} Called when authentication succeeds.
 */
function initAuthentication(onAuthSuccess) {
  firebase.authAnonymously(function(error, authData) {
    if (error) {
      console.log('Login Failed!', error);
    } else {
      data.sender = authData.uid;
      onAuthSuccess();
    }
  }, {remember: 'sessionOnly'});  // Users will get a new id for every session.
}

Der nächste Codeabschnitt wartet auf Klicks auf der Karte. Dadurch wird der Firebase-Datenbank ein untergeordnetes Objekt hinzugefügt. Wenn dies der Fall ist, ruft die Funktion snapshot.val() die Datenwerte des Eintrags ab und erstellt ein neues Objekt vom Typ „LatLng“.

// Listener for when a click is added - add it to the heatmap.
clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
  function(snapshot) {
    var newPosition = snapshot.val();
    var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
    heatmap.getData().push(point);
  }
);

Mit dem folgenden Code wird Firebase so konfiguriert, dass Zeitstempel ständig erfasst und Klicks auf der Karte, die älter als 10 Sekunden in Echtzeit sind, gelöscht werden.

/**
 * Set up a Firebase with deletion on clicks older than expirySeconds
 * @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
 * which points are added from Firebase.
 */
function initFirebase(heatmap) {

  // 10 minutes before current time.
  var startTime = new Date().getTime() - (60 * 10 * 1000);

  // Reference to the clicks in Firebase.
  var clicks = firebase.child('clicks');

  // Remove old clicks.
  clicks.orderByChild('timestamp').endAt(startTime).on('child_added',
    function(snapshot) {
      snapshot.ref().remove();
    }
  );

}

/**
 * Adds a click to firebase.
 * @param {Object} data The data to be added to firebase.
 *     It contains the lat, lng, sender and timestamp.
 */
function addToFirebase(data) {
  getTimestamp(function(timestamp) {
    // Add the new timestamp to the record data.
    data.timestamp = timestamp;
    var ref = firebase.child('clicks').push(data, function(err) {
      if (err) {  // Data was not written to firebase.
        console.log(err);
      }
    });
  });
}

/**
 * Also called each time the map is clicked.
 * Updates the last_message/ path with the current timestamp.
 * @param {function(Date)} addClick After the last message timestamp has been updated,
 *     this function is called with the current timestamp to add the
 *     click to the firebase.
 */
function getTimestamp(addClick) {
  // Reference to location for saving the last click time.
  var ref = firebase.child('last_message/' + data.sender);

  ref.onDisconnect().remove();  // Delete reference from firebase on disconnect.

  // Set value to timestamp.
  ref.set(Firebase.ServerValue.TIMESTAMP, function(err) {
    if (err) {  // Write to last message was unsuccessful.
      console.log(err);
    } else {  // Write to last message was successful.
      ref.once('value', function(snap) {
        addClick(snap.val());  // Add click with same timestamp.
      }, function(err) {
        console.log(err);
      });
    }
  });
}

Kopieren Sie den JavaScript-Code in diesem Abschnitt in die Datei firebasemap.js.

Erstellen der Heatmap

Der nächste Schritt besteht im Anzeigen einer Heatmap, die den Betrachtern einen grafischen Eindruck von der relativen Anzahl der Klicks an verschiedenen Orten auf der Karte vermittelt. Weitere Informationen finden Sie im Leitfaden für Heatmaps.

Fügen Sie den folgenden Code innerhalb der Funktion initMap() hinzu, um eine Heatmap zu erstellen.

// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: [],
  map: map,
  radius: 16
});

Mit dem folgenden Code werden die Funktionen initFirebase, addToFirebase und getTimestamp ausgelöst.

initAuthentication(initFirebase.bind(undefined, heatmap));

Ersetzen Sie als Nächstes den Markercode durch die nachstehende Zeile, um alle Einträge in der Firebase-Datenbank als Punkte auf der Heatmap anzuzeigen.

heatmap.getData().push(point);

Jetzt ausprobieren

Laden Sie die Datei index.html wieder in Ihren Webbrowser. Wenn Nutzer in anderen Browsern auf diese Karte klicken, sollten Sie die Punkte auf der Karte sehen können.

Erstellen von Punkten auf der Heatmap

Hinweis: Wenn Sie auf die Heatmap klicken, werden noch keine Punkte erstellt.

Mit dem folgenden Code wird ein Listener innerhalb der Funktion initMap() hinter dem Code, mit dem die Karte erstellt wird, hinzugefügt. Dieser Code wartet auf die Daten jedes Klicks, speichert den Ort des Klicks in der Firebase-Datenbank und zeigt die Punkte auf der Heatmap an.

// Listen for clicks and add the location of the click to firebase.
map.addListener('click', function(e) {
  data.lat = e.latLng.lat();
  data.lng = e.latLng.lng();
  addToFirebase(data);
});

Jetzt ausprobieren

Klicken Sie auf Orte auf der Karte, um Punkte auf der Heatmap zu erstellen.

Sie verfügen jetzt über eine voll funktionsfähige Echtzeitanwendung, die Firebase und die Google Maps JavaScript API nutzt.

Wenn Sie auf die Heatmap klicken, sollte der Breiten- und der Längengrad des Klicks jetzt in der Firebase-Datenbank angezeigt werden. Dies können Sie sehen, indem Sie sich bei Ihrem Firebase-Konto anmelden und zum Daten-Tab Ihrer App navigieren. Wenn jetzt eine andere Person auf Ihre Karte klickt, können sowohl Sie als auch diese Person die Punkte auf der Karte sehen. Der Ort der Klicks wird dauerhaft beibehalten, auch nachdem der Nutzer die Seite geschlossen hat. Um die Funktion für die gemeinsame Bearbeitung in Echtzeit zu testen, öffnen Sie die Seite in zwei getrennten Fenstern. Die Marker sollten in beiden Fenstern in Echtzeit angezeigt werden.

Weitere Infos

Firebase ist eine Anwendungsplattform, die Daten im JSON-Format speichert und mit allen verbundenen Clients in Echtzeit synchronisiert wird. Sie ist auch dann verfügbar, wenn Ihre App offline geschaltet wird. In dieser Anleitung wird die Echtzeitdatenbank von Firebase verwendet.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API