Reputation: 743
I'm using the Google Maps and Places APIs to get a list of places and add them to a map. When you click on one of the markers, an info window appears allowing the user to see the place's name, contact details etc. For about 60% of the markers everything works fine, but for the other 40%, the info windows don't appear. Looking at the javascript errors I see this one:
Uncaught TypeError: Cannot read property 'name' of null.
Here's my code to create the info window:
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
var one = 1;
var two = 2;
var request = { reference: place.reference };
service.getDetails(request, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(
details.name + "<br />"
+ details.formatted_address + "<br />"
+ "<a target='_blank' href='" + details.website +"'>Visit Website</a>" + "<br />"
+ details.formatted_phone_number + "<br />"
+ "<a href='#' onclick='getDirections(" + details.geometry.location.toUrlValue()
+ "," + location1 + "); return false;'>Directions from Marker One</a>" + "<br />"
+ "<a href='#' onclick='getDirections2(" + details.geometry.location.toUrlValue()
+ "," + location2 + "); return false;'>Directions from Marker Two</a>" + "<br />"
);
infowindow.open(map, this);
});
});
}
I don't really understand the error. Surely all of the places that are stored by Google must have a name?!
For the record, I've looked through the Google Places & Maps API documentation and I can't really find anything that helps me.
Any help would be greatly appreciated on this one.
UPDATE:
So I've logged the places in the console as suggested. For the example test that I'm doing it creates exactly 20 markers on my map. Out of the 20 it creates only 8 display the info window when clicked, the other 12 return the error listed above. All 20 of the places have been printed to the console as I would expect, all as objects and they all appear to look the same. Below I've listed what was printed in the console for one that was clickable and one that wasn't.
Clickable:
Object
geometry: Object
html_attributions: Array[0]
icon: "http://maps.gstatic.com/mapfiles/place_api/icons/bar-71.png"
id: "97df16ee5e8d0d9e0c337f52b66dd85ae44de298"
name: "Red Lion"
rating: 3.3
reference: "CnRmAAAA1Oe3LpGcT2zpHUgRq4jfsx-QsnpgUlPKKhVhBL0AVjY1BNKJiscqTbxl-25alM_DJzTIjJTeIkpuVKL0CHkxgBc_nLKNddOkKv6EICQymo7etn-MVY4h06bTKUBwSjIfH30vbNSgCeiv3Cfzy27eORIQrUUJ4nStEjkCI2fJMTaVsRoUHI04xFPDfej3xHC17nJH2mBNBzg"
types: Array[3]
vicinity: "Little Missenden, Amersham"
__proto__: Object
Not Clickable:
Object
geometry: Object
html_attributions: Array[0]
icon: "http://maps.gstatic.com/mapfiles/place_api/icons/bar-71.png"
id: "01128746c46a52d9a215d3d6a01c11e22f1a49be"
name: "The Full Moon"
rating: 3.9
reference: "CnRrAAAAWDw84_G5mLrNQxd1b14uVsPhw6LmR6sXdvDrJqSDqnMUSzj88n1TImyictRtxtI6_mQz5YXyiBDWM5Un74MoCH06On5kf5JDw6RM3le2SDUcqyZO04NhqwyeBT267ctu91I74hTJmx_VGgqEpXe0HxIQhErbCKXmDJU2yaVmtltITxoUOi4OrxKU9fPGoBiYAn3NGmNpcn8"
types: Array[2]
vicinity: "Hare Lane, Little Kingshill, Great Missenden"
__proto__: Object
I've also tried stripping out all unnecessary code.
Might be worth noting that some of the properties printed in the console can be expanded further, not sure if it was relevant so I didn't do it for the examples. I can add an updated one at a later date if anyone thinks it's relevant.
Thanks for all of the responses so far.
JA
Upvotes: -2
Views: 15034
Reputation: 6213
details
is null
, so your request, ie place.reference
has a problem. log place
to the console and open it to see what's in there -- if anything.
Upvotes: -1