Google Maps Places API Code Not Running - Final Project

Question

I am quite far into my final project and needed either a database or software which would return places when given a keyword and an area as input. E.g. Restaurants in London.

I tried using the Google Maps Javascript Places API which does just that and have copied google's documentation, however it doesn't successfully run. There is no error message either.

This is the url for the documentation: https://developers.google.com/maps/documentation/javascript/places#find_place_from_query

alert("1");

var request = {
    query: 'Restaurant',
    fields: ['formatted_address', 'name', 'rating', 'geometry'],
};

alert("2");

service = new google.maps.places.PlacesService(map);
alert("3");
service.findPlaceFromQuery(request, callback);

alert("success");

Only the first two alerts are received. Here is the callback function which is required as a parameter for the query:

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            var place = results[i];
            addMarker(place);
        }
    }
}

This is all in a file called scripts.js which also contains a Google Map (which runs completely normally). I'm not sure whether I need to store the API Key in the code because, my Google Map runs fine without one.

Please can someone either tell me what my problem is or suggest another way to perform this job.

Answer 1

I added this line service = new google.maps.places.PlacesService(map); to my pset8 and it gave this message TypeError: google.maps.places is undefined in the browser console.

Internet search of the error turned up this stack post which says you need to add a libraries option to the Google API URL (more detail in the link).

But wait, there's more! (5 hours later, including dinner break) I spent more time on this than I shoulda, but I love a puzzle.

findPlaceFromQuery is not the right tool (API) for the job. A "query" is something like "restaurants in london" (try it, it gives a result). I suggest you implement with nearbySearch api instead.

This might take a lot of trial-and-error. You may spend a lot of time in the browser dev console. It's school. That's how school works :)

And because I cannot help myself....Shhhh! Don't tell Google you're accessing their map apis without an API key. It is unlikely your "Google Map runs fine without [an API key]". It is embedded in the Google API URL in index.html.