Our Blogs

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=23.2599333,77.412615&radius=150000&type=beauty_salon&keyword=cruise&key=AIzaSyCCVA0LMpQDw70JogxhqMo-IV8gjc_to-s' from origin 'http://domain.com’ has been blocked by CORS policy: No 'Access-Control-Allo

Posted on January 01, 1970 by Professional Clickers

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=23.2599333,77.412615&radius=150000&type=beauty_salon&keyword=cruise&key=AIzaSyCCVA0LMpQDw70JogxhqMo-IV8gjc_to-s' from origin 'http://domain.com’ has been blocked by CORS policy: No 'Access-Control-Allo

If  you are facing ( blocked by CORS policy: No 'Access-Control-Allow-Origin' header ) this error while Using Google Place API. And you already wasted your time to add Access-Control-Allow-Origin: * in header or migrate http:// to https:// so please read google place API document carefully. If you want to call google place API on client side like ajax, it won’t work you will get error ( been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. )

SOLUTION: You can use google place API by Place Library ( https://developers.google.com/maps/documentation/javascript/places )

Here is the sample code to use Google API:-

 

 

 

// jquery Script

// place liabrary ( https://maps.googleapis.com/maps/api/js?key=YOUR-API-KET&libraries=places )

script-open tag

var map;

var service;

var infowindow;

var locationname = "india";

                                function initialize() {

                                var letlongapi = "https://maps.googleapis.com/maps/api/geocode/json?address="+locationname+"&key=YOUR-API-KET";

                                $.get({

                                                  url : letlongapi,

                                                  success: function(data){

                                                                var lat = data.results[0].geometry['location']['lat'];

                                                    var lng = data.results[0].geometry['location']['lng'];

 

                                                    var pyrmont = new google.maps.LatLng(lat,lng);

 

                                                                  map = new google.maps.Map(document.getElementById('map'), {

                                                                      center: pyrmont,

                                                                      zoom: 15

                                                                    });

 

                                                                  var request = {

                                                                    location: pyrmont,

                                                                    radius: '15000',

                                                                    type: ['beauty_salon'],

                                                                  };

                                                                  service = new google.maps.places.PlacesService(map);

                                                                  service.nearbySearch(request, callback);

                                                                }

                                                });

                                                }

                                                function callback(results, status) {

                                   console.log(results);

                                                }

                                                google.maps.event.addDomListener(window,'load',initialize);

script-close tag

 

 

Hope It will help you. ????