Как я могу использовать ajax с google map api?

Question

Когда я пытаюсь получить json из google map Place API с помощью ajax, я получаю ошибку this. Я попытался использовать jsonp и beforeSend, и они вообще не работали. Это мой код ajax ниже.

var baseAPIUrl = 'https://maps.googleapis.com/maps/api/directions/json?'; 
$.ajax({ 
      url: baseAPIUrl += "origin=place_id:" + placeId[0] + "&destination=place_id:" + placeId[1] + apikey, 
      type: "GET", 
      dataType: "json", 
      crossDomain: true, 
      success: function(data) { 
         do something.. 
      } 
} 

Я пытаюсь получить направление от url как json и делать что-то с информацией о направлении. Есть ли идеи для этого? Спасибо !

Answer 1

Прежде всего, у вас есть опечатка:

url: baseAPIUrl + "origin=place_id:" + placeId[0] + "&destination=place_id:" + placeId[1] + apikey, 

Это не должно быть baseAPIUrl += но baseAPIUrl +.

Во-вторых, вы не можете получить доступ к URL-адресам, находящимся за пределами вашего домена (localhost в этом случае).

Читайте об этом здесь: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Короче говоря, вы должны были бы сделать AJAX запрос на сервер и сервер сделает запрос на Google API.

Answer 2

Попробуйте что-то вроде этого:

$(document).ready(function(){ 
    $.ajax({ 
     url: 'mapProcess.php',       
     type: 'POST',         
     data: { 
      var1 :val1 // parameter 
     }, 
     success: function(response){ // response from mapProcess.php 
      // do your stuff here 
     } 
    }); 
}); 

Php:

$url = "https://maps.googleapis.com/maps/api/geocode/json?address=".$address."&components=country:IN&key=your_key"; 

// CURL call to get data from API 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 

$APIresponse = curl_exec($ch); 

curl_close($ch); 

$resp = json_decode($APIresponse, true);