Collaborative Realtime Mapping with Firebase not working
<p>I am fairly new to JS and the Google Maps API. I am trying to go through the basic tutorial Google has provided <a href="https://developers.google.com/maps/documentation/javascript/tutorials/firebase" rel="nofollow">here</a> to map in realtime. I am using Sublime Text and saving the html and .js files on my server. I have set up a Firebase account and referenced it. I cannot get the javascript to properly feed the latitude and longitude to my Firebase database. </p>

<p>Here is my html &amp; css:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    &lt;/style&gt;
    &lt;script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;

    &lt;script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByiF_oXuIND_HKTnWb2EYjuHazdhi8F_k
        &amp;libraries=visualization&amp;callback=initMap"&gt;
    &lt;/script&gt;
    &lt;script src="map.js"&gt; &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is my javascript:</p>

<pre><code> var firebase = new Firebase(
    "https://spatialform.firebaseio.com/# KDyLsffRQiYNSsPGBVW|77ec456e3f094217dc4cbe36f45256f4"
);

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
    center: {
        lat: 39.6017,
        lng: -110.7970
    },
    zoom: 14,
    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
});
map.addListener('click', function(e) {
    var marker = new google.maps.Marker({
        position: {
            lat: e.latLng.lat(),
            lng: e.latLng.lng()
        },
        firebase.push({
            lat: e.latLng.lat(),
            lng: e.latLng.lng()
        });
        map: map
    });
});

firebase.on("child_added", function(snapshot, prevChildKey) {
    var newPosition = snapshot.val();
    var latLng = new google.maps.LatLng(newPosition.lat,
        newPosition.lng);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
});
}
</code></pre>

<p>All I get is the basic map. I can navigate it, but that is it. </p>

<p>What am I missing? </p>