Attuare una ricerca di indirizzo con Google Geocoding API (o simile) [chiuso]

Question

Vorrei aggiungere una funzionalità per il mio sito web in cui un cliente può inserire il proprio codice postale, e automtaically guarda in alto il loro indirizzo sia con Google Geocoding o un opensource / Bing equivalente.

Qualcuno ha avuto alcun codice di esempio o di conoscere una buona guida dove posso fare questo?

Se è fatto utilizzando jQuery ancora meglio:)

Molte grazie in anticipo

Darren

Answer 1

Sei dopo la parte mappatura unica, o non si vuole realmente catturare l'indirizzo del cliente?

Se siete dopo l'indirizzo completo, quindi la Royal Mail PAF è quello che serve. Dai un'occhiata alla nostra azienda, CraftyClicks -. Abbiamo rivendere i dati di PAF ad un costo molto ragionevole

Google API vi darà la posizione unica e una mappa.

Saluti, Adam

Answer 2

Utilizzo getJSON e jQuery di Google API - http://codepen.io/seanjacob/pen/wfcHB

$('#submit').click(function(){  

  //Get Postcode
  var number = $('#number').val();
  var postcode = $('#postcode').val().toUpperCase();;

  //Get latitude & longitude
  $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + postcode + '&key=[[YOUR_API_KEY]]', function(data) {

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

    //Get address    
    $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&key=[[YOUR_API_KEY]]', function(data) {              
      var address = data.results[0].address_components;              
      var street = address[1].long_name;
      var town = address[2].long_name;
      var county = address[3].long_name;                        

      //Insert
      $('#text').text(number + ', ' + street + ', ' + town + ', ' + county + ', ' + postcode);

    });
  });
});

A meno che non si sta utilizzando Google Maps API for Business, si è limitato a 2.500 richieste di geolocalizzazione al giorno. Dal momento che questo script sta facendo due richieste per ciclo, che è 1.250 Cap look up al giorno.

Answer 3

In realtà sto lavorando su un'applicazione Google Maps che utilizzi geocodifica in questo momento ... E 'la mia prima, così mi è stato grazie soprattutto al di Google Maps. Ecco i link per aiutarvi a iniziare:

http://code.google.com/apis/maps/ documentazione / javascript / basics.html -. Un semplice punto di partenza per l'API in generale

Cercare nella colonna di sinistra per il tutorial, Geocoding (o seguire il link geocoding a metà strada attraverso il tutorial), ed esempi di codice.

Tutti questi mi ha fatto dove avevo bisogno di iniziare.

Buona fortuna!

Lelando

Answer 4

Grazie seanjacob per la risposta che mi ha fatto per scavare un po 'più profonda. I risultati restituiti in address_components non sono sempre gli stessi tipi, cioè indice 1 non sempre avviene il nome della strada, quindi è meglio controllare il valore restituito in address_components [n] .types [0] per determinare il tipo di campo di indirizzo esso contiene.

Si prega di notare anche che si dovrebbe ora fare la chiamata alla API di Google tramite https e sarà necessario specificare la vostra chiave API.

Ecco lo script:

function getAddress() {
//Get Postcode
var number = $('#HouseNumber').val();
var postcode = $('#PostCode').val().toUpperCase();;
var address_1 = '';
var address_2 = '';
var town = '';
var county = '';
var pcode = '';
var region = '';
var country = '';
//Get Address
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + postcode + '&sensor=false&key=[YOUR API KEY IN HERE]', function (data) {

    // Format/Find Address Fields
    var address = data.results[0].address_components;
    // Loop through each of the address components to set the correct address field
    $.each(address, function () {
        var address_type = this.types[0];
        switch (address_type) {
            case 'route':
                address_1 = number + ' ' + this.long_name;
                break;
            case 'locality':
                address_2 = this.long_name;
                break;
            case 'postal_town':
                town = this.long_name;
                break;
            case 'administrative_area_level_2':
                county = this.long_name;
                break;
            case 'administrative_area_level_1':
                region = this.long_name;
                break;
            case 'country':
                country = this.long_name;
                break;
        }
    });
    // Sometimes the county is set to the postal town so set to empty if that is the case
    if (county === town) {
        county = '';
    }
    // Display the results
    $('#address_1').text(address_1);
    $('#address_2').text(address_2);
    $('#town').text(town);
    $('#county').text(county);
    $('#postcode').text(postcode);
    $('#region').text(region);
    $('#country').text(country);
});

}

E qui è la pagina chiamando la funzione

<div class="form-horizontal">
<div class="form-group">
    <div class="col-md-2 control-label"><label for="HouseNumber">House No.</label></div>
    <div class="col-md-10">
        <input type="text" id="HouseNumber" name="HouseNumber" />
    </div>
</div>
<div class="form-group">
    <div class="col-md-2 control-label"><label for="PostCode">Post Code</label></div>
    <div class="col-md-10">
        <input type="text" id="PostCode" name="PostCode" />
    </div>
</div>
<div class="form-group">
    <div class="row">
        <div class="col-md-4 acc-centre">&nbsp;</div>
        <div class="col-md-4 acc-centre"><input type="button" class="btn btn-primary btn-lg" value="Lookup" onclick="getAddress()"></div>
        <div class="col-md-4 acc-centre">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col-md-12 acc-centre">
            <span id="address_1"></span><br />
            <span id="address_2"></span><br />
            <span id="town"></span><br />
            <span id="county"></span><br />
            <span id="postcode"></span><br />
            <span id="region"></span><br />
            <span id="country"></span><br />
        </div>
    </div>
</div>