How do I properly format this JavaScript Array/Object for Google Maps?

Question

Having trouble with the Google Maps API in terms of structuring the data coming off of an AJAX request. Here's where I'm at currently:

const getMarkerData = function ( googlemap, $hook ) {
const hData = $hook.dataset;
const format = "json";
const dataType = "json";
const markerData = [];
let item = null;

core.api.collection( hData.url, format, dataType ).done(( response ) => {
    const items = response.items;

    if ( response.items ) {
        let i = items.length;

        for ( i; i--; ) {
            item = items[ i ];
            markerData.push({
                position: new google.maps.LatLng(item.location.mapLat, item.location.mapLng),
                title: item.location.addressTitle
            });
        }
    }
    const googleMapMarkers = new google.maps.Marker( markerData );

    googleMapMarkers.setMap( googlemap );
});
};

From what I understand, Google Maps wants the data in JSON and not in an array. What I can tweak to get to get it there?

New revised, working code:

core.api.collection( hData.url, format, dataType ).done(( response ) => {
    const items = response.items;

    if ( response.items ) {
        let i = items.length;

        for ( i; i--; ) {
            item = items[ i ];

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.location.mapLat, item.location.mapLng),
                title: item.location.addressTitle,
                map: googleMap
            });
            googleMapMarkers.push(marker);
        }
    }

});

KMB · Accepted Answer · 2016-02-08 11:26:55Z

1

You are trying to treat a single marker as an array of markers.

const googleMapMarkers = new google.maps.Marker( markerData );

This won't work.

Why not create an instance of google.maps.Marker as you are iterating through the items and save push them into an array. You can also set the map of each in that iteration.

var googleMapMarkers = [];

    for ( i; i--; ) {
                item = items[ i ];
                markerData.push({
                    position: new google.maps.LatLng(item.location.mapLat, item.location.mapLng),
                    title: item.location.addressTitle
                });

               markerData.setMap(googleMap);
               googleMapMarkers.push(markerData);
            }

This is assuming markerData is a valid google map marker. If it isn't you may have a little more code to construct that object, but it's easily done and plenty examples in the API reference.

answered Feb 8, 2016 at 11:26

KMB

4731 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jasonbarone Over a year ago

Hey thanks but I'm not sure I understand, I revised the code above to do what I thought you had recommended and it still doesn't seem to work how I'm doing it. I'm basically iterating through the request and in that process, creating a LatLng instance for the position, and now setting the map as per some of Google's examples. Still not displaying my marker data.

jasonbarone Over a year ago

Nevermind I ended up reworking a bit more to get it right. Thanks again!

Collectives™ on Stack Overflow

How do I properly format this JavaScript Array/Object for Google Maps?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related