Использование Google Maps API с Firebase - PullRequest
0 голосов
/ 04 декабря 2018

Изображение базы данных Firebase.

Screen Shot

Это моя база данных Firebase.Данные там есть картинки с тегами геолокации.Я хочу, чтобы на моем сайте отображалось место, где была сделана каждая фотография, с помощью API Google Map API на моем веб-сайте.

Я провел небольшое исследование, и похоже, что Firebase - единственное, что имеет отношение кэто создание тепловых карт.Я попытался выполнить, и вот что я смог придумать:

 var map, infoWindow, db;
         function initMap() {
           map = new google.maps.Map(document.getElementById('map'), {
             center: {lat: -34.397, lng: 150.644},
             zoom: 6
           });
           infoWindow = new google.maps.InfoWindow;

           // Try HTML5 geolocation.
           db =firebase.firestore();
          // if (navigator.geolocation)
           if(db.collection("signs").where("type", "==", 'geopoint')) {
             navigator.geolocation.getCurrentPosition(function(position) {
               var pos = {
                 lat: position.coords.latitude,
                 lng: position.coords.longitude
               };

               infoWindow.setPosition(pos);
               infoWindow.setContent('Location found.');
               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);
         }
       </script>
       <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
       </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...