Im getting an error when trying to show markers on a map, from a JSON feed. Im getting alot of adresses, and then trying to get the Long & Latitude for the adress, and then place it on a map, however, im getting an error: Cannot read property 'geometry' of undefined in the console.

the code:

$.getJSON(apiUrl, function( data ) {
            var delay = 0,
                p,
                contentString,
                iconBase;

            _.each(data, function (value, key) { 

                var link = value.LinkUrl,
                    address = value.Address,
                    content = "<div class='info-address'>" +  address + "</div>
                               <div class='info-message'>" + value.OpeningHoursMessage + "</div>
                               <div class='info-link'><a href='"+ value.LinkUrl +"'>Læs mere</a></div>";
                console.log("Adresse: " + address);
                $.getJSON('='+address+', Danmark', null, function (data) {


                        p = data.results[0].geometry.location,
                        contentString = content,
                        iconBase = '/static/dist/img/';

                        //console.log("Værdi" + p);

                        var latlng = new google.maps.LatLng(p.lat, p.lng);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            animation: google.maps.Animation.DROP,
                            icon: iconBase + 'maps-marker.png',
                            url: link
                        });

                        //If single lookup, then center to position
                        if(DOM.dataAddress.length) {
                            var pos = {lat: lat, lng: lng};
                            map.setCenter(pos);
                        }

                        bindInfoWindow(marker, map, infowindow, contentString);

                        DOM.markersArray.push(marker);


                });
            });
        });

Im getting an error when trying to show markers on a map, from a JSON feed. Im getting alot of adresses, and then trying to get the Long & Latitude for the adress, and then place it on a map, however, im getting an error: Cannot read property 'geometry' of undefined in the console.

the code:

$.getJSON(apiUrl, function( data ) {
            var delay = 0,
                p,
                contentString,
                iconBase;

            _.each(data, function (value, key) { 

                var link = value.LinkUrl,
                    address = value.Address,
                    content = "<div class='info-address'>" +  address + "</div>
                               <div class='info-message'>" + value.OpeningHoursMessage + "</div>
                               <div class='info-link'><a href='"+ value.LinkUrl +"'>Læs mere</a></div>";
                console.log("Adresse: " + address);
                $.getJSON('http://maps.googleapis./maps/api/geocode/json?address='+address+', Danmark', null, function (data) {


                        p = data.results[0].geometry.location,
                        contentString = content,
                        iconBase = '/static/dist/img/';

                        //console.log("Værdi" + p);

                        var latlng = new google.maps.LatLng(p.lat, p.lng);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            animation: google.maps.Animation.DROP,
                            icon: iconBase + 'maps-marker.png',
                            url: link
                        });

                        //If single lookup, then center to position
                        if(DOM.dataAddress.length) {
                            var pos = {lat: lat, lng: lng};
                            map.setCenter(pos);
                        }

                        bindInfoWindow(marker, map, infowindow, contentString);

                        DOM.markersArray.push(marker);


                });
            });
        });

• javascript
• google-maps

• 1 Try console.log on your data.results, you're trying to get something that isn't there, it reports that data.results[0] is undefined. Debug it and see, my money is on that you have to call data.results.geometry.location. – Eihwaz Commented Apr 5, 2016 at 16:10
• Possible duplicate of Get the lat and lng sometime is NULL with google map api json – geocodezip Commented Apr 5, 2016 at 19:39

1 Answer 1

It looks like the response should be an array according to the docs. Maybe one of the addresses you're requesting does not have any results? You should put a check after you make the JSON request to the maps API.

$.getJSON('http://maps.googleapis./maps/api/geocode/json?address='+address+', Danmark', null, function (data) {
    if (data.results.length > 0) {
        // set `p` and other code
    }
});