Erste Reaktion in Netzwerk, sondern Konsole Rückkehr Fehler mit Quer Herkunft

Question

Ich verwende google map api für Web ... auch Suche in der Nähe api direkt von jquery Ich rufe Orten zu suchen, dies Fehler in der Konsole das ist die Antwort im Netzwerk

Ich habe bereits hinzugefügt, um API von allen Referrer in Google API-Konsole zu verwenden.

 var param = { 
     key: "My_Key", 
     location: pos.lat+','+pos.lng, 
     radius: 3000, 
     type: "church" 
    }; 
    $.ajax({ 
     url: "https://maps.googleapis.com/maps/api/place/nearbysearch/json?" + jQuery.param(param), 
     method: "GET", 
     async: false, 
     success: function(resp) { 
      console.log(resp); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 

Answer 1

Verwenden Sie nicht die Places API web service von Javascript auf dem Client, verwenden Sie die Google Maps Javascript API v3 Places Library.

example in documentation

proof of concept fiddle (using the posted request parameters)

Code-Schnipsel:

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: '3000', 
 
    type: ['church'] 
 
    }; 
 

 
    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]); 
 
    } 
 
    } 
 
} 
 

 
function createMarker(place) { 
 
    var placeLoc = place.geometry.location; 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: place.geometry.location 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(place.name); 
 
    infowindow.open(map, this); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map"></div>

Answer 2

Versuchen als dataType : 'jsonp' in Ihrem $.ajax Gespräch hinzugefügt wird,

$.ajax({ 
     url: "https://maps.googleapis.com/maps/api/place/nearbysearch/json?" + jQuery.param(param), 
     method: "GET", 
     dataType : 'jsonp', 
     async: false, 
     success: function(resp) { 
      console.log(resp); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 

hoffe, das hilft!