I am unable to access the Google API due to the restrictions set in the Access-Control-Allow-Origin header, even though I have specified dataType as

Question

I am unable to access the Google API due to the restrictions set in the Access-Control-Allow-Origin header, even though I have specified dataType as

My attempts to utilize Google's Places API in order to retrieve nearby locations have hit a roadblock. I initially tried adding the header exactly as outlined in the code, but it proved ineffective. Subsequently, I experimented with dataType:'jsonp', however, this approach resulted in some errors. Upon examining the error within Chrome, I noticed that the data was successfully returned from Google, yet I encountered issues accessing it. Interestingly, Firefox presented only the second line of the data "html_attributions":[]," instead of displaying the entire dataset.

$.ajax({                        
       url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=13.089500428429146,77.48688038438559&radius=1000&type=bus_station&key=AXXXXXXXXXXXXXXXXXXXXXXX",
        type:"GET",
        //headers:{"Access-Control-Allow-Origin":"https://maps.googleapis.com/"},
        dataType: 'jsonp',
        success: function (return_data_json){
                console.log(return_data_json);
        }   
});

javascript ajax google-maps google-places-api

Answer 1

Answer №1

Here's how we can implement this in Javascript - Google offers its own functions for this purpose.

Link: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

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

If anyone wants to access the place Id and other information, here is how it can be done. In the callback function, we have the JSONArray of places returned by Google. Inside the for loop of the callback function after the line var place = results[i];, you can retrieve what you need like
```
console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
```

Answer 2

Here's how we can implement this in Javascript - Google offers its own functions for this purpose.

Link: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

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

If anyone wants to access the place Id and other information, here is how it can be done. In the callback function, we have the JSONArray of places returned by Google. Inside the for loop of the callback function after the line var place = results[i];, you can retrieve what you need like
```
console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
```

I am unable to access the Google API due to the restrictions set in the Access-Control-Allow-Origin header, even though I have specified dataType as

Answer №1

Similar questions

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

"What is the best way to use JavaScript to dynamically modify the hover color of a button

Is there a way to determine if a container is overflowing at the top?

Testing AJAX functionality in WordPress resulting in a 400 error code

Encountering a TypeError when using the react useRef() hook

Using Javascript Regular Expressions to validate that the first number in an amount is non-zero

Why isn't the login redirect script working without any errors or redirection?

The sequence in which functions are executed when bound to an event in JavaScript

Show the JSON response from the controller on the view page

How to modify the background color in Material Ui's datepicker?

Tips for updating the color of a table row when it is chosen and a row is inserted using ajax

What is the optimal approach: Extracting HTML from a jQuery response?

Using Vuetify 3 to conditionally render v-icon inside a v-data-table

Achieving Ajax Request Activation through Button Click in Bootstrap

My div is currently being concealed by a jQuery script that is hiding all of its

Navigate to the following section on an HTML page by clicking a button using jQuery

The functionality of Angular.js ajax and apply is experiencing technical difficulties

Is it possible to retrieve a callback function from a select event in the Bootstrap dual listbox?

Customize the jQuery datepicker by assigning a class to the first 17 days