Google Places API - Uncaught SyntaxError: Unexpected token :

Question

I've been researching this for over an hour, and can't find a solution that works.

My js:

 var googleUrl = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types=geocode&language=fr&key=<MY KEY>'

  $.ajax({
      type: 'GET',
      url: googleUrl,
      dataType: 'jsonp',
      success: function(response)    {

          console.log(response)
       },
      error: function(response)    {
          console.log(response);
      }

  })

I saw this question, which suggested a 'callback method' - I still can no figure out why I'm getting the error: Uncaught SyntaxError: Unexpected token :

I see it has been marked a duplicate -- but as I have already indicated, I have tried everything in that other post, and I am still unable to get the access to work, without using JSONP. Constructive feedback of how to solve the problem would be useful.

Any advice is appreciated!!

UPDATE - obviously my key in my code is not 'my key'.

I just tried your code, with my API key, and it worked when I changed the content type to `json` — Alicia Sykes, May 06 '17 at 21:27
The response is `JSON`, not `JSONP`. They are not interchangable. Change `dataType: 'jsonp'` to `dataType: 'json'`, *However* that then leads to a `No Access Control Header` error as the URL you're calling doesn't have CORS headers in the response. Therefore you cannot make an AJAX request to that domain. You need to do it server side instead — Rory McCrossan, May 06 '17 at 21:31
@legotin lol I think he just put it as `` rather than publishing his API key online !! I'm sure in his code he has the real key ;) — Alicia Sykes, May 06 '17 at 21:51
@RoryMcCrossan - this shouldn't have been marked as duplicate, they are similar questions but caused by very different issues — Alicia Sykes, May 06 '17 at 21:53
Can I suggest that maybe you don't use `$.ajax` at all - it's old school and that's why Google is no longer supporting `jsonp`. Instead what your trying to do it easily possible with Google's nice client-side JavaScript library. Check out the docs, here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete — Alicia Sykes, May 06 '17 at 21:55
The underlying problem is identical. The confusion is caused from the misconception that JSONP is a magical fix to missing CORS headers — Rory McCrossan, May 06 '17 at 21:56

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

Your syntax error is due to the fact that googleUrl responses with JSON, not JSONP, that you specified as dataType parameter.

So, just change dataType from jsonp to json.

You can learn more about this formats here.

edited May 23 '17 at 11:47

Community

1
1

answered May 06 '17 at 21:24

Legotin

2,378
1
18
28

If I use JSON, the I get this error `XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types=geocode&language=fr&key=. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.` – gwalshington May 06 '17 at 21:25
Perhaps, you should change GET-parameter `key` from `` to the real key. – Legotin May 06 '17 at 21:28
Yup, that's a whole new error. @Legotin answered your original question, you should accept his answer – Alicia Sykes May 06 '17 at 21:28
6

@legotin duh. Obviously I have a key in my code. I'm not posting my key in this public forum. This is not the issue, nor does the error indicate that is the issue. – gwalshington May 06 '17 at 21:43
1

@legotin - why do you keep mentioning `` (first in a comment below the question, and now here)? This is *exactly* how someone should represent their key, vs actual key (which happens *all* the time). – David Makogon May 07 '17 at 03:16
This is a good solution, thank you! – Amir Md Amiruzzaman Oct 12 '18 at 17:41

Google Places API - Uncaught SyntaxError: Unexpected token :

1 Answers1