Google maps Firebase обновление маркера

218
06 мая 2018, 18:33

Подскажите пожалуйста,имеется такой код карты с маркерами FireBase как можно обновлять их,без релоада страницы,каждую секунду?

<script>
    var config;
    function initialize() {
      var infowindow = new google.maps.InfoWindow();
      var map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(59.91378, 30.35894),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      // Initialize Firebase
      var config = {
        apiKey: "Ключ",
        authDomain: "Домен",
        databaseURL: "База",
        projectId: "ИД",
        storageBucket: "Ведро",
        messagingSenderId: "ИД"
      };
      firebase.initializeApp(config);
      //Create a node at firebase location to add locations as child keys
      var locationsRef = firebase.database().ref("users");
      var bounds = new google.maps.LatLngBounds();
      locationsRef.on('child_added', function(snapshot) {
        var data = snapshot.val();
        console.log(data);
        var marker = new google.maps.Marker({
          position: {
            lat: data.latitude,
            lng: data.longitude
          },
          map: map
        });
        bounds.extend(marker.getPosition());
        marker.addListener('click', (function(data) {
          return function(e) {
            infowindow.setContent(data.name);
            infowindow.open(map, this);
          }
        }(data)));
        map.fitBounds(bounds);
      });
    }
    </script>
    <style>
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBVFHz4EuuN1tiAtuTwTRAvI40998Pb2A&libraries=visualization&callback=initialize">
        </script>
    <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>
    <div id="map_canvas"></div>
Answer 1
                  setInterval(function () {
  //Create a node at firebase location to add locations as child keys
  var locationsRef = firebase.database().ref("users");
  var bounds = new google.maps.LatLngBounds();
  locationsRef.on('child_added', function(snapshot) {
    var data = snapshot.val();
    console.log(data);
    var marker = new google.maps.Marker({
      position: {
        lat: data.latitude,
        lng: data.longitude
      },
      map: map
    });
    bounds.extend(marker.getPosition());
    marker.addListener('click', (function(data) {
      return function(e) {
        infowindow.setContent(data.name);
        infowindow.open(map, this);
      }
    }(data)));
        setInterval(function () {  marker.setMap(null); }, 999);

//Данная функция выше,решила мой вопрос.

    marker.setMap(map);
  });
    }, 1000);
READ ALSO
Где ошибка в скрипте вкладок?

Где ошибка в скрипте вкладок?

Подскажите, пожалуйста, где у меня ошибка в скрипте? Благодарю!

271
Как получить значение href

Как получить значение href

У меня есть ссылка,

190
Не полностью выводятся товары в jquery

Не полностью выводятся товары в jquery

Есть datajson и есть картинки в каждой которой есть слог _tn хочу чтобы выводился список товаров c этими картинками, но почему-то только выводятся...

215
Как сделать отступ при скролле на определенное количество пикселей?

Как сделать отступ при скролле на определенное количество пикселей?

Подскажите, пожалуйста, как при скролле сделать отступ от верха экрана на определенное число пикселей? Благодарю!

186