javascript - Add markers from firebase to google map in website - Stack Overflow

admin管理员组

文章数量:1426042

Firebase data structure :

I need to add markers in the google map using these latlang.

My code :

    <script>
    var map;

    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 6.930274, lng: 79.861618},
          zoom: 16.5,
          panControl: false,
          gestureHandling: 'greedy',
          disableDefaultUI: true,
          disableDoubleClickZoom: true,
        });

        var dbRef= firebase.database().ref('bins');
        dbRef.on('value', function(snapshot) {
            var snap = snapshot.val();
            var marker = new google.maps.Marker({
              position: {lat: snap.lat, lng: snap.lang},
              map: map
            });
        });
    }
</script>

Nothing happened when this code runs.

Firebase data structure :

I need to add markers in the google map using these latlang.

My code :

    <script>
    var map;

    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 6.930274, lng: 79.861618},
          zoom: 16.5,
          panControl: false,
          gestureHandling: 'greedy',
          disableDefaultUI: true,
          disableDoubleClickZoom: true,
        });

        var dbRef= firebase.database().ref('bins');
        dbRef.on('value', function(snapshot) {
            var snap = snapshot.val();
            var marker = new google.maps.Marker({
              position: {lat: snap.lat, lng: snap.lang},
              map: map
            });
        });
    }
</script>

Nothing happened when this code runs.

• javascript
• google-maps
• firebase
• google-maps-markers
• marker

Share Improve this question Follow edited Jun 23, 2018 at 0:48 Nuwan Alawatta asked Mar 23, 2018 at 5:49 Nuwan AlawattaNuwan Alawatta 1,8672121 silver badges2929 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

check this out

use parseFloat() in the position because firebase return data as strings.

position: {lat: parseFloat(snap.lat), lng: parseFloat(snap.lang)}

This is because you are not accessing the children of bins you have to use forEach to be able to get the values:

 var dbRef= firebase.database().ref('bins');
    dbRef.on('value', function(snapshot) {
    snapshot.forEach(function(child) {
    var childs=child.val();
    var marker = new google.maps.Marker({
          position: {lat: childs.lat, lng: childs.lang},
          map: map
          });
       });
   });

本文标签： javascriptAdd markers from firebase to google map in websiteStack Overflow