title: Using Google Maps API with Firebase
body: <p>Image of Firebase database.</p>
  
  <p><img src="https://i.stack.imgur.com/tk6Rx.jpg" alt="Screen Shot"></p>
  
  <p>This is my Firebase database. The data in there are pictures with Geolocation tags. I want to be able to have the location where each picture was taken pop up on Google Maps using the Google Map API on my website.</p>
  
  <p>I did some research and it looks like the only thing Firebase has in relation to this is creating heat maps. I tried following through and this is what I was able to come up with: </p>
  
  <pre><code> 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);
           }
         &lt;/script&gt;
         &lt;script async defer
         src="https://maps.googleapis.com/maps/api/js?key=APIKEY&amp;callback=initMap"&gt;
         &lt;/script&gt;
  </code></pre>