Google Maps Marker from JSON data not rendering marker

Question

So I'm using a .json file to feed marker information for my google maps script. For some reason, it will not render the map marker.

The map will render and I can place a marker as documented from google but when I try to convert my JSON data to render the marker it simply does nothing. No console errors either.

You'll note the console logs as I've been trying to figure this out and I end up with:

[0] Event Location: [object Object]

Am I not properly creating the object for this?

jQuery(document).ready(function ($) {
    $.getJSON('../wp-content/plugins/loopden/json/map.json', function (eventsData) {
    // Grabbing our JSON file to mark the map.

        Object.size = function(obj) {
            var size = 0, key;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };

        // Get the size of an object
        var eventsSize = Object.size(eventsData);
        console.log(eventsSize);
        console.log(eventsData[0].lat);
        for (var i = 0, l=eventsSize; i <l; i++){
            var lat = eventsData[i].lat;
            var lng = eventsData[i].lng;

            var latlng = {"lat":parseInt(lat) , "lng":parseInt(lng)};
            console.log('['+i+'] Event Location: '+latlng);

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: eventsData[i].title
            });
        }
    });
});

Here is the JSON data I'm working with:

{
  "0": {
    "lat": "-93.2745179",
    "lng": "44.9817854",
    "title": "Super Cool Event",
    "date": "2017-08-25",
    "time": "8:00pm - 10:00am",
    "cost": "$15",
    "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur, leo ac gravida vestibulum, nisi metus posuere nibh, malesuada faucibus erat eros nec metus. Morbi tincidunt iaculis eros quis fringilla.",
    "featured": "off"
  }
}

Answer 1

I think your problem is related to parseInt.

Your lat/lng values are being modified by parseInt. If you have "-93.2745..." as latitude, when you use parseInt only the 93 will be extracted from it.

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

Try parseFloat instead:

for (var i = 0, l=eventsSize; i <l; i++) {
    var lat = data[i].lat;
    var lng = data[i].lng;

    var latlng = {
        lat: parseFloat(lat), 
        lng: parseFloat(lng)
    };

    console.log('['+i+'] Event Location: ', latlng);

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: data[i].title
    });
}

Also, you are getting this log [0] Event Location: [object Object] because you are trying to "concatenate" the object.

If you want to log an object, just use it as an argument in console.log like:

console.log('['+i+'] Event Location: ', latlng);

Hope this helps.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 2

Part of the problem is that you're using parseInt to parse a floating point number, so everything after the decimal is truncated.

The other problem is that the lat-long you're using in the JSON data is invalid - from here:

The valid range of latitude in degrees is -90 and +90 for the southern and northern hemisphere respectively. Longitude is in the range -180 and +180 specifying coordinates west and east of the Prime Meridian, respectively.

So, a latitude of -93 doesn't make any sense.

Answer 3

I was able to fix this buy using new google.maps.latlng instead of trying to put it together outside of the marker..

    jQuery(document).ready(function ($) {
    $.getJSON('../wp-content/plugins/loopden/json/map.json', function (eventsData) {
    // Grabbing our JSON file to mark the map.

        Object.size = function(obj) {
            var size = 0, key;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };

        // Get the size of an object
        var eventsSize = Object.size(eventsData);
        console.log(eventsSize);
        console.log(eventsData[0].lat);
        for (var i = 0, l=eventsSize; i <l; i++){
            var lat = eventsData[i].lat;
            var lng = eventsData[i].lng;

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)),
                map: map,
                title: eventsData[i].title
            });
        }
    });
});