Google Maps Geokodierung AJAX mit einer Variablen als die URL

Question

$('form').submit(function(event){ 
    event.preventDefault(); 
    var userData = "https://maps.googleapis.com/maps/api/geocode/json?address="+$('input#city').val()+"&key=MY_API_KEY"; 
    console.log(userData); 
    $.ajax({ 
     type: "GET", 
     url : userData, 
     success: function(data){ 
      $.each(data['results'][0]['address_components'], function(key, value) { 
       if(value["types"][0] == "postal_code"){ 
        $('.alert-success').fadeIn(2000).html('Post/ZIP Code: '+value["long_name"]); 
       } 
      }); 
     } 
    }) 
    }); 

Also habe ich diesen Code, oben, der derzeit keine Fehler noch irgendwelche Ergebnisse wie gewünscht zurückgibt.

Es funktioniert gut, solange ich den ganzen ‚https://maps.googleapis.com/maps/api/geocode/json?address=‚‘& key =‚‘‘ setzte Zeichenfolge im url: "", Abschnitt des Ajax, aber wenn sie meine Variable übergeben darin will nichts tun.

Von dem, was ich gefunden habe, Variablen sollten leicht genug in den Ajax Anruf übergeben, so dass ich irgendwie verloren bin.

Answer 1

Sie müssen kodieren URL der Zeichenfolge zurückgegeben von $('input#city').val()

damit verbundene Frage: JavaScript URL encode

Hinweis: Nicht alle Geocoder Datensätze zurück Mitgliedern des Antwort-Array mit einem postal_code-Typ (wie zum Beispiel einer Abfrage für "New York, NY" hat es mehrere Postleitzahlen.

var userData = "https://maps.googleapis.com/maps/api/geocode/json?address=" 
       + encodeURIComponent($('input#city').val()) 
       + "&key=MY_API_KEY"; 
console.log(userData); 
$.ajax({ 
    type: "GET", 
    url: userData, 
    success: function(data) { 
    console.log(data); 
    $.each(data['results'][0]['address_components'], function(key, value) { 
     if (value["types"][0] == "postal_code") { 
     $('.alert-success').fadeIn(2000).html('Post/ZIP Code: ' + value["long_name"]); 
     } 
    }); 
    } 
}); 

Answer 2

Ihr Zustand if (value["types"][0] == "postal_code") { funktioniert nicht.

Überprüfen Sie das zurückgegebene Datenobjekt über console.log.

Hier ist eine Arbeits Geige ohne es:

https://jsfiddle.net/1t82y0xa/