How to add google maps marker from array (javascript)?

Question

I hope for a bit support about my following 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);
    });
});

I'm trying to get the array, that's filled with GPS position as a strings, into the google map, as markers. Tried several methods but none works. Can anyone can give me a tip or an direction?

Thanks!

syciphj · Accepted Answer · 2018-02-06 04:27:51Z

If position is the array that will hold your coordinates. You need to make sure the array elements inside follow a latLng object or what the marker.position property would recognize. Usually it would follow this format:

var latLngObj = {lat: -25.363, lng: 131.044};

You can use your forEach loop to already add a marker per iteration. Before/Aftter pushing the coordinates to the position array do something like:

var marker = new google.maps.Marker({
          position: {lat: childData.lat, lng:childData.lng},
          map: map
        });

I'm not sure how childData actually looks like, as you didn't give that info, but assuming it's a double like -25.363 and not a string, then it will be fine.

You might also want to define your map variable globally so that your functions can recognize it at the part of map: map as you're only defining the map variable inside your initMap function.

Here's the documentation that may guide you on how to add a marker to the map. Just use an iteration (e.g. for loop) to add multiple markers. You'll also see how to delete them in the same documentation.

Also found a relevant stackoverflow post on properly looping to create your markers.

Hope that helps!

Collectives™ on Stack Overflow

How to add google maps marker from array (javascript)?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related