установить значение информационного содержимого со значением из базы данных Firebase в реальном времени

Пользователь переполнения стека дал мне ответ на предыдущий вопрос, который у меня был.

Он сделал скрипку для моего ответа. Его скрипка отлично работает для того, что я хочу, но по какой-то причине я не могу заставить его код работать с моим

Это скрипт http://jsfiddle.net/geocodezip/fnygnokw/6/?utm_source=website&utm_medium=embed&utm_campaign=fnygnokw

Это мой код. Я хочу иметь возможность щелкнуть маркер и отобразить некоторую информацию из моей базы данных, что его код может сделать отлично.

Это ссылка на предыдущий вопрос несколько маркеров на картах google из базы данных firebase

Если бы кто-нибудь мог помочь мне понять, как он смог это сделать, я был бы очень признателен.

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <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>
    <!-- Place this inside the HTML head; don't use async defer for now -->

    
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>

  <script>
        
        var config = {
    apiKey: "",
    authDomain: "carrier-35d7c.firebaseapp.com",
    databaseURL: "https://carrier-35d7c.firebaseio.com",
    projectId: "carrier-35d7c",
    storageBucket: "carrier-35d7c.appspot.com",
    messagingSenderId: "827792028763"
  };
        if (!firebase.apps.length) {
            firebase.initializeApp(config);
        }
        
        //Create a node at firebase location to add locations as child keys
        //var locationsRef = firebase.database().ref("locations");
        
        // Create a new GeoFire key under users Firebase location
        //var geoFire = new GeoFire(locationsRef.push());
        //Create a node at firebase location to add locations as child keys
        //confirm(firebase.auth().currentUser)
    
    //var a = localStorage.getItem('phoneNumber');
    
 
        var locationsRef = firebase.database().ref("locations");
        var pushRef = locationsRef.push()
      // Create a new GeoFire key under users Firebase location
      // replace var geoFire = new GeoFire(locationsRef.push()); with
      var geoFire = new GeoFire(pushRef); 
      </script>


  </head>
  <body>
    <div id="map"></div>
    <script>
      
    
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      var lat, lng;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 18
          //mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        infoWindow = new google.maps.InfoWindow;
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            
            var pos = {lat: lat, lng: lng, name };
                _setGeoFire();
              var locationsRef = firebase.database().ref("locations");
locationsRef.on('child_added', function(snapshot) {
  var data = snapshot.val();
 
   
   
  
  var marker = new google.maps.Marker({
    position: {
      lat: data.User.l[0],
      lng: data.User.l[1]
     
    },
    map: map,
     
      
   // new google.maps.Size(42, 68)
  });
  
  
  bounds.extend(marker.getPosition());
  marker.addListener('click', (function(data) {
    return function(e) {
      infowindow.setContent(this.getPosition().toUrlValue(6) + "<br>" + data.User.g);
      infowindow.open(map, this);
    }
  }(data)));
  map.fitBounds(bounds);
});
          
            infoWindow.setPosition(pos);
            infoWindow.setContent('Current Location');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }
      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }
     function _setGeoFire(){
geoFire.set("User", [lat, lng] ).then(()=>{
  console.log("Location added");
  
  pushRef.child("User").onDisconnect().remove();
}).catch(function(error) {
  console.log(error);
});
}
    </script>
    <script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
    </script>
  </body>
</html>

введите здесь описание изображения


person Varun Prakash    schedule 10.12.2018    source источник
comment
Я получаю ошибки javascript с опубликованным кодом (Uncaught ReferenceError: infowindow is not defined, ваш InfoWindow объект infoWindow не infowindow, javascript чувствителен к регистру).   -  person geocodezip    schedule 10.12.2018
comment
Я не уверен, что понимаю, о чем вы говорите, не могли бы вы отредактировать мой код, чтобы отразить ваш комментарий. Кроме того, как вам удалось заставить маркеры в вашей скрипте щелкнуть и показать координаты и значение из базы данных? Я пытался понять это   -  person Varun Prakash    schedule 10.12.2018
comment
Что вы видите в консоли javascript, когда запускаете опубликованный вами код?   -  person geocodezip    schedule 10.12.2018
comment
Я отредактировал свой пост, чтобы включить скриншот моей консоли, когда я запускаю опубликованный код.   -  person Varun Prakash    schedule 10.12.2018
comment
Если возможно, не могли бы вы отредактировать код, который я разместил, чтобы отразить результаты кода на вашей скрипке? Я пытался целую вечность, но я не могу заставить его работать.   -  person Varun Prakash    schedule 10.12.2018
comment
Обратите внимание, что скриншоты не одобряются, они не доступны для поиска, текст был бы лучше. Вы не думаете, что было бы полезно определить границы (или изменить код, чтобы исключить его использование)? (забыл, что мне нужно было исправить эту ошибку, а также ошибку информационного окна).   -  person geocodezip    schedule 10.12.2018
comment
После того, как я исправил эти ошибки, код не показывает ошибок и работает точно так же, как ваша скрипка! Спасибо еще раз   -  person Varun Prakash    schedule 10.12.2018