JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&amp;ext=.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

JavaScript

google.maps.event.addDomListener(window, "load", initMap);
function initMap() {
// Reference to the Firebase database.
var firebase = new Firebase("https://adopt-a-portal.firebaseio.com/");
var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40,
      lng: 10
    },
    zoom: 3
  });

  // Add marker on user click
  map.addListener('click', function(e) {
    firebase.push({
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    });
  });
  // Create a heatmap.
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: [],
    map: map,
    radius: 8
  });
  firebase.on("child_added", function(snapshot, prevChildKey) {
    // Get latitude and longitude from Firebase.
    var newPosition = snapshot.val();

    // Create a google.maps.LatLng object for the position of the marker.
    // A LatLng object literal (as above) could be used, but the heatmap
    // in the next step requires a google.maps.LatLng object.
    var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng);

    // Place a marker at that location.
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
        //  icon: image
    });
    heatmap.getData().push(latLng);
  });
}