How to use CORS to implement JavaScript Google Places API request [duplicate]

up vote
7
down vote

favorite

This question already has an answer here:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

5 answers

I really do NOT understand how I'm supposed to make this work:

var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';



console.log(requestURL);



$.getJSON( requestURL, function( data ) {

  // data

  console.log(data);

});

and my HTML file:

  <body>



        <script

  src="https://code.jquery.com/jquery-2.2.4.min.js"

  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="

  crossorigin="anonymous"></script>

        <script src="main.js" charset="utf-8"></script>   

  </body>

I always get the No 'Access-Control-Allow-Origin' header is present on the requested resource. message... even though if I go to https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw in my browser I get the proper JSON returned.

I am lead to believe that CORS can help me here. I don't understand CORS. Please, can anyone help me in plain simple terms? What should I change to make this work??

Thanks

asked Feb 11 '17 at 20:20

Ryan Mc

154110

marked as duplicate by Quentin javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 12 '17 at 10:47

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

The first thing to do is see if Google Places support CORS. If not, there's no point. My guess is they only support JSONP, but check the documentation.
– Kevin Christopher Henry
Feb 11 '17 at 20:36

It does but I am too dumb to make any sense of it developers.google.com/api-client-library/javascript/features/…
– Ryan Mc
Feb 11 '17 at 20:41

I'm not sure why this was marked as a duplicate. It's clearly not.
– Josh Habdas
Jun 11 '17 at 6:05

add a comment |

up vote
7
down vote

favorite

This question already has an answer here:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

5 answers

I really do NOT understand how I'm supposed to make this work:

var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';



console.log(requestURL);



$.getJSON( requestURL, function( data ) {

  // data

  console.log(data);

});

and my HTML file:

  <body>



        <script

  src="https://code.jquery.com/jquery-2.2.4.min.js"

  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="

  crossorigin="anonymous"></script>

        <script src="main.js" charset="utf-8"></script>   

  </body>

I am lead to believe that CORS can help me here. I don't understand CORS. Please, can anyone help me in plain simple terms? What should I change to make this work??

Thanks

asked Feb 11 '17 at 20:20

Ryan Mc

154110

marked as duplicate by Quentin javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 12 '17 at 10:47

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

The first thing to do is see if Google Places support CORS. If not, there's no point. My guess is they only support JSONP, but check the documentation.
– Kevin Christopher Henry
Feb 11 '17 at 20:36

It does but I am too dumb to make any sense of it developers.google.com/api-client-library/javascript/features/…
– Ryan Mc
Feb 11 '17 at 20:41

I'm not sure why this was marked as a duplicate. It's clearly not.
– Josh Habdas
Jun 11 '17 at 6:05

add a comment |

up vote
7
down vote

favorite

This question already has an answer here:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

5 answers

I really do NOT understand how I'm supposed to make this work:

var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';



console.log(requestURL);



$.getJSON( requestURL, function( data ) {

  // data

  console.log(data);

});

and my HTML file:

  <body>



        <script

  src="https://code.jquery.com/jquery-2.2.4.min.js"

  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="

  crossorigin="anonymous"></script>

        <script src="main.js" charset="utf-8"></script>   

  </body>

I am lead to believe that CORS can help me here. I don't understand CORS. Please, can anyone help me in plain simple terms? What should I change to make this work??

Thanks

asked Feb 11 '17 at 20:20

Ryan Mc

154110

This question already has an answer here:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

5 answers

I really do NOT understand how I'm supposed to make this work:

var requestURL = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw';



console.log(requestURL);



$.getJSON( requestURL, function( data ) {

  // data

  console.log(data);

});

and my HTML file:

  <body>



        <script

  src="https://code.jquery.com/jquery-2.2.4.min.js"

  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="

  crossorigin="anonymous"></script>

        <script src="main.js" charset="utf-8"></script>   

  </body>

I am lead to believe that CORS can help me here. I don't understand CORS. Please, can anyone help me in plain simple terms? What should I change to make this work??

Thanks

This question already has an answer here:

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

5 answers

javascript json google-api cors

asked Feb 11 '17 at 20:20

Ryan Mc

154110

asked Feb 11 '17 at 20:20

Ryan Mc

154110

asked Feb 11 '17 at 20:20

Ryan Mc

154110

asked Feb 11 '17 at 20:20

Ryan Mc

154110

asked Feb 11 '17 at 20:20

Ryan Mc

154110

marked as duplicate by Quentin javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 12 '17 at 10:47

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Quentin javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Feb 12 '17 at 10:47

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

The first thing to do is see if Google Places support CORS. If not, there's no point. My guess is they only support JSONP, but check the documentation.
– Kevin Christopher Henry
Feb 11 '17 at 20:36

It does but I am too dumb to make any sense of it developers.google.com/api-client-library/javascript/features/…
– Ryan Mc
Feb 11 '17 at 20:41

I'm not sure why this was marked as a duplicate. It's clearly not.
– Josh Habdas
Jun 11 '17 at 6:05

add a comment |

The first thing to do is see if Google Places support CORS. If not, there's no point. My guess is they only support JSONP, but check the documentation.
– Kevin Christopher Henry
Feb 11 '17 at 20:36

It does but I am too dumb to make any sense of it developers.google.com/api-client-library/javascript/features/…
– Ryan Mc
Feb 11 '17 at 20:41

I'm not sure why this was marked as a duplicate. It's clearly not.
– Josh Habdas
Jun 11 '17 at 6:05

The first thing to do is see if Google Places support CORS. If not, there's no point. My guess is they only support JSONP, but check the documentation.
– Kevin Christopher Henry
Feb 11 '17 at 20:36

It does but I am too dumb to make any sense of it developers.google.com/api-client-library/javascript/features/…
– Ryan Mc
Feb 11 '17 at 20:41

I'm not sure why this was marked as a duplicate. It's clearly not.
– Josh Habdas
Jun 11 '17 at 6:05

add a comment |

1 Answer
1

active

oldest

votes

up vote
10
down vote

accepted

You are trying to use the Google Places API Web Service on client side whereas it is designed for server side applications. That's probably why appropriate CORS response headers are not set by the server.

As explained in the Notes at the beginning of the Place Details documentation, you should use the Places Library in the Google Maps JavaScript API:

If you're building a client-side application, take a look at the Google Places API for Android, the Google Places API for iOS, and the Places Library in the Google Maps JavaScript API.

Note: you will need to enable the Google Maps JavaScript API in your Google Developer Console first.

Here is a way you can proceed to get place details (based on the example from the documentation):

<head>

    <script type="text/javascript">

        function logPlaceDetails() {

          var service = new google.maps.places.PlacesService(document.getElementById('map'));

          service.getDetails({

            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'

          }, function (place, status) {

            console.log('Place details:', place);

          });

        }

    </script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>

</head>

<body>

    <div id="map"></div>

</body>

Google Place details output to the console

edited Feb 12 '17 at 10:46

answered Feb 12 '17 at 0:01

rd3n

2,47211835

This seems good but a few things: 1) You're using ES6 (I dont understand ES6 yet), 2) it doesnt work for me, 3) I dont want a map, I just want to return the object of the place so I can output the data in anyway I choose. Thanks for your help
– Ryan Mc
Feb 12 '17 at 9:19

1) I have just replaced const by var and (place, status) => by function(place, status) so there is no more ES6, 2) Can you elaborate? Do you have an error in the console? 3) I am not a Google Maps expert but it seems you can provide a Dom node instead of a map instance to the PlacesService, so no map is rendered. I have tested and updated the code accordingly
– rd3n
Feb 12 '17 at 10:46

I finally got this to work by modyfying the example on the Google documentation. Thanks, your answer pointed me in the right direction.
– Ryan Mc
Feb 12 '17 at 11:23

Glad it helped ;-)
– rd3n
Feb 12 '17 at 11:34

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
10
down vote

accepted

As explained in the Notes at the beginning of the Place Details documentation, you should use the Places Library in the Google Maps JavaScript API:

If you're building a client-side application, take a look at the Google Places API for Android, the Google Places API for iOS, and the Places Library in the Google Maps JavaScript API.

Note: you will need to enable the Google Maps JavaScript API in your Google Developer Console first.

Here is a way you can proceed to get place details (based on the example from the documentation):

<head>

    <script type="text/javascript">

        function logPlaceDetails() {

          var service = new google.maps.places.PlacesService(document.getElementById('map'));

          service.getDetails({

            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'

          }, function (place, status) {

            console.log('Place details:', place);

          });

        }

    </script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>

</head>

<body>

    <div id="map"></div>

</body>

Google Place details output to the console

edited Feb 12 '17 at 10:46

answered Feb 12 '17 at 0:01

rd3n

2,47211835

This seems good but a few things: 1) You're using ES6 (I dont understand ES6 yet), 2) it doesnt work for me, 3) I dont want a map, I just want to return the object of the place so I can output the data in anyway I choose. Thanks for your help
– Ryan Mc
Feb 12 '17 at 9:19

1) I have just replaced const by var and (place, status) => by function(place, status) so there is no more ES6, 2) Can you elaborate? Do you have an error in the console? 3) I am not a Google Maps expert but it seems you can provide a Dom node instead of a map instance to the PlacesService, so no map is rendered. I have tested and updated the code accordingly
– rd3n
Feb 12 '17 at 10:46

I finally got this to work by modyfying the example on the Google documentation. Thanks, your answer pointed me in the right direction.
– Ryan Mc
Feb 12 '17 at 11:23

Glad it helped ;-)
– rd3n
Feb 12 '17 at 11:34

add a comment |

up vote
10
down vote

accepted

As explained in the Notes at the beginning of the Place Details documentation, you should use the Places Library in the Google Maps JavaScript API:

If you're building a client-side application, take a look at the Google Places API for Android, the Google Places API for iOS, and the Places Library in the Google Maps JavaScript API.

Note: you will need to enable the Google Maps JavaScript API in your Google Developer Console first.

Here is a way you can proceed to get place details (based on the example from the documentation):

<head>

    <script type="text/javascript">

        function logPlaceDetails() {

          var service = new google.maps.places.PlacesService(document.getElementById('map'));

          service.getDetails({

            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'

          }, function (place, status) {

            console.log('Place details:', place);

          });

        }

    </script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>

</head>

<body>

    <div id="map"></div>

</body>

Google Place details output to the console

edited Feb 12 '17 at 10:46

answered Feb 12 '17 at 0:01

rd3n

2,47211835

This seems good but a few things: 1) You're using ES6 (I dont understand ES6 yet), 2) it doesnt work for me, 3) I dont want a map, I just want to return the object of the place so I can output the data in anyway I choose. Thanks for your help
– Ryan Mc
Feb 12 '17 at 9:19

1) I have just replaced const by var and (place, status) => by function(place, status) so there is no more ES6, 2) Can you elaborate? Do you have an error in the console? 3) I am not a Google Maps expert but it seems you can provide a Dom node instead of a map instance to the PlacesService, so no map is rendered. I have tested and updated the code accordingly
– rd3n
Feb 12 '17 at 10:46

I finally got this to work by modyfying the example on the Google documentation. Thanks, your answer pointed me in the right direction.
– Ryan Mc
Feb 12 '17 at 11:23

Glad it helped ;-)
– rd3n
Feb 12 '17 at 11:34

add a comment |

up vote
10
down vote

accepted

As explained in the Notes at the beginning of the Place Details documentation, you should use the Places Library in the Google Maps JavaScript API:

If you're building a client-side application, take a look at the Google Places API for Android, the Google Places API for iOS, and the Places Library in the Google Maps JavaScript API.

Note: you will need to enable the Google Maps JavaScript API in your Google Developer Console first.

Here is a way you can proceed to get place details (based on the example from the documentation):

<head>

    <script type="text/javascript">

        function logPlaceDetails() {

          var service = new google.maps.places.PlacesService(document.getElementById('map'));

          service.getDetails({

            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'

          }, function (place, status) {

            console.log('Place details:', place);

          });

        }

    </script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>

</head>

<body>

    <div id="map"></div>

</body>

Google Place details output to the console

edited Feb 12 '17 at 10:46

answered Feb 12 '17 at 0:01

rd3n

2,47211835

As explained in the Notes at the beginning of the Place Details documentation, you should use the Places Library in the Google Maps JavaScript API:

If you're building a client-side application, take a look at the Google Places API for Android, the Google Places API for iOS, and the Places Library in the Google Maps JavaScript API.

Note: you will need to enable the Google Maps JavaScript API in your Google Developer Console first.

Here is a way you can proceed to get place details (based on the example from the documentation):

<head>

    <script type="text/javascript">

        function logPlaceDetails() {

          var service = new google.maps.places.PlacesService(document.getElementById('map'));

          service.getDetails({

            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'

          }, function (place, status) {

            console.log('Place details:', place);

          });

        }

    </script>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAW4CQp3KxwYkrHFZERfcGSl--rFce4tNw&libraries=places&callback=logPlaceDetails"></script>

</head>

<body>

    <div id="map"></div>

</body>

Google Place details output to the console

edited Feb 12 '17 at 10:46

answered Feb 12 '17 at 0:01

rd3n

2,47211835

edited Feb 12 '17 at 10:46

answered Feb 12 '17 at 0:01

rd3n

2,47211835

answered Feb 12 '17 at 0:01

rd3n

2,47211835

answered Feb 12 '17 at 0:01

rd3n

2,47211835

This seems good but a few things: 1) You're using ES6 (I dont understand ES6 yet), 2) it doesnt work for me, 3) I dont want a map, I just want to return the object of the place so I can output the data in anyway I choose. Thanks for your help
– Ryan Mc
Feb 12 '17 at 9:19

1) I have just replaced const by var and (place, status) => by function(place, status) so there is no more ES6, 2) Can you elaborate? Do you have an error in the console? 3) I am not a Google Maps expert but it seems you can provide a Dom node instead of a map instance to the PlacesService, so no map is rendered. I have tested and updated the code accordingly
– rd3n
Feb 12 '17 at 10:46

I finally got this to work by modyfying the example on the Google documentation. Thanks, your answer pointed me in the right direction.
– Ryan Mc
Feb 12 '17 at 11:23

Glad it helped ;-)
– rd3n
Feb 12 '17 at 11:34

add a comment |

This seems good but a few things: 1) You're using ES6 (I dont understand ES6 yet), 2) it doesnt work for me, 3) I dont want a map, I just want to return the object of the place so I can output the data in anyway I choose. Thanks for your help
– Ryan Mc
Feb 12 '17 at 9:19

1) I have just replaced const by var and (place, status) => by function(place, status) so there is no more ES6, 2) Can you elaborate? Do you have an error in the console? 3) I am not a Google Maps expert but it seems you can provide a Dom node instead of a map instance to the PlacesService, so no map is rendered. I have tested and updated the code accordingly
– rd3n
Feb 12 '17 at 10:46

I finally got this to work by modyfying the example on the Google documentation. Thanks, your answer pointed me in the right direction.
– Ryan Mc
Feb 12 '17 at 11:23

Glad it helped ;-)
– rd3n
Feb 12 '17 at 11:34

This seems good but a few things: 1) You're using ES6 (I dont understand ES6 yet), 2) it doesnt work for me, 3) I dont want a map, I just want to return the object of the place so I can output the data in anyway I choose. Thanks for your help
– Ryan Mc
Feb 12 '17 at 9:19

1) I have just replaced const by var and (place, status) => by function(place, status) so there is no more ES6, 2) Can you elaborate? Do you have an error in the console? 3) I am not a Google Maps expert but it seems you can provide a Dom node instead of a map instance to the PlacesService, so no map is rendered. I have tested and updated the code accordingly
– rd3n
Feb 12 '17 at 10:46

I finally got this to work by modyfying the example on the Google documentation. Thanks, your answer pointed me in the right direction.
– Ryan Mc
Feb 12 '17 at 11:23

Glad it helped ;-)
– rd3n
Feb 12 '17 at 11:34

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu