adding google maps marker from array, js

How are you ? :)

I need some help, if you'd like to :)

Here is my Javascript code :

 
   // Initialize Firebase
            var config = { 
    
       apiKey: "AIzaSyBRC2kza6jhghEFNr5dteVpw2kB9mxqrU8",
       authDomain: "formulaire-7fba1.firebaseapp.com",
       databaseURL: "https://formulaire-7fba1.firebaseio.com",
       projectId: "formulaire-7fba1",
       storageBucket: "formulaire-7fba1.appspot.com",
       messagingSenderId: "548100244430"
     };
    
     firebase.initializeApp(config);
    
    function initMap() {
      
      var map = new google.maps.Map(document.getElementById('map'), {
      
          
        center: {lat: 0, lng: 0},
        zoom: 3,
        styles: [{
          featureType: 'poi',
          stylers: [{ visibility: 'off' }]  // Turn off points of interest.
        }, {
          featureType: 'transit.station',
          stylers: [{ visibility: 'off' }]  // Turn off bus stations, train stations, etc.
        }],
        disableDoubleClickZoom: true
      });
        
    
        
    
        
    }
    
    
    
    // Loop through users in order with the forEach() method. The callback
    // provided to forEach() will be called synchronously with a DataSnapshot
    // for each child:
    var query = firebase.database().ref("client").orderByKey();
    query.once("value")
      .then(function(snapshot) {
        
        var position = [];
        
        snapshot.forEach(function(childSnapshot) {
          // key will be "ada" the first time and "alan" the second time
          var key = childSnapshot.key;
          // childData will be the actual contents of the child
          var childData = childSnapshot.val();
            
            position.push(childData.lat + " " + childData.lng);
            console.log(position);
            
          });
          
            
           
    
      });

Open in new window

   

I'am trying to get the array, that's  filled with gps position as a strings, into the google map, as markers. Tried several methods but noone works. Maybe anyone can give me a tips? :)

Thanks !
Quentin CourtheouxAsked:
Who is Participating?
 
Slick812Commented:
greetings Quentin Courtheoux, , , ,  I do not have any Firebase or other DB JS, , but I will try and show you how I have made markers on a google map.

 First I create a google map object, I will use very very basic code, you can add the styles or features you may need.
var basicMap = new google.maps.Map(
  document.getElementById('map'), {
   zoom: 17,
   center: {lat: 30.000006, lng: -30.000006}
    });

Open in new window


now you need to get an create markers with the API of -
    google.maps.Marker(
with the lat and lng you require for marker points, I can not use a firebase but according to your code -
query.once("value")
      .then(function(snapshot)  {
        var positions = [];
        
        snapshot.forEach(function(childSnapshot) {
          // key will be "ada" the first time and "alan" the second time
          var key = childSnapshot.key;
          // childData will be the actual contents of the child
          var childData = childSnapshot.val();
            


// you can just try to make the markers here if the basicMap has been created
         var marker = new google.maps.Marker({
             position: {lat: childData.lat , lng: childData.lng},
            map: basicMap,
            title: '? ?'
           });

            
          });

Open in new window


I can not test this code, but map markers are made with the google API -
   new google.maps.Marker(

which I believe needs two properies in the options, ,  the map property - -and the position property , which is an object with two properties as  lat and lng
0
 
Slick812Commented:
this question has been inactive for more than 14 days and must be closed for cleanup. Points awarded to possible solution code
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.