Comment mettre en forme le résultat de sortie de l'API Google Maps Autocomplete

Question

Bonjour, j'essaie de modifier les résultats de sortie comme le quartier, la ville et le pays. Mon intention est que lorsque l'utilisateur entre son adresse, il retourne seulement la rue.

Exemple de données que je veux supprimer.

Ceci est mon script de l'API Google Maps.

<script> 
    function initAutocomplete() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     center: { 
      lat: -23.69389, 
      lng: -46.565 
     }, 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var marker = new google.maps.Marker({ 
     position: { 
      lat: 34.3630003, 
      lng: -84.332207 
     }, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     draggable: true 
     }); 

     var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); 

     google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 
     var bounds = new google.maps.LatLngBounds(); 
     var i, place; 

     for (i = 0; place = places[i]; i++) { 
      bounds.extend(place.geometry.location); 
      marker.setPosition(place.geometry.location); 
     } 

     map.fitBounds(bounds); 
     map.setZoom(14); 
     }); 
    } 

    var map = document.getElementById("map"); 
    google.maps.event.trigger(map, 'resize'); 

    google.maps.event.addDomListener(window, 'load', initAutocomplete); 
    </script> 

Ceci est ma boîte de recherche.

<div class="input-field col s6"> 
     <i class="material-icons prefix">home</i> 
     <input placeholder="Defina um endereço para seu fornecedor" id="pac-input" name="addressRouteTransporter" type="text" class="validate"> 
     <label for="addressRouteTransporter">Endereço:</label> 
    </div> 

Merci pour l'aide xD

Answer 1

Votre cas d'utilisation est en fait mieux pour l'utilisation de la fonction Places Autocomplete au lieu des lieux SearchBox. Ce que vous allez faire est filtrer à travers le tableau address_components de l'endroit sélectionné et obtenir seulement les goûts de route ou premise etc, qui sont ce que "l'adresse" est faite. Ex:

componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    sublocality_level_1: 'long_name', 
    premise: 'long_name' 
}; 

Ensuite, il suffit de remplacer la valeur du champ d'entrée à la combinaison de vos composants choisis. inputField.value = addressString;

Je recommande de lire plus ici:

• Google sample Assurez-vous de faire attention à l'avertissement dans la doc sur les

« Vous devrez peut-être sélectionner des composants différents pour aligner avec les formats d'adresse postale de différents pays. "

• Google documentation

Je veux aussi mentionner le code que vous avez fourni est très incomplète et j'ai essayé de créer un minimum, par exemple vérifiable, complète sur pour vous montrer les bases de la façon de utilisez les composants de saisie semi-automatique et d'adresse.

travail lien jsFiddle: https://jsfiddle.net/yy3p7hh9/1/

extrait de code ci-joint:

var autocomplete, 
 
marker, 
 
map, 
 
inputField = document.getElementById('pac-input'), 
 
// this is the type of address components you would like to get. You will filter through this object and 
 
// check if the place result has any 1 of these address components. 
 
// Notice how type 'locality' will not be retrieved so big, general places without these properties will not 
 
// show 
 
componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    sublocality_level_1: 'long_name', 
 
    premise: 'long_name' 
 
}; 
 

 
function initAutocomplete() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -23.69389, 
 
     lng: -46.565 
 
    }, 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 34.3630003, 
 
     lng: -84.332207 
 
    }, 
 
    map: map, 
 
    animation: google.maps.Animation.DROP, 
 
    draggable: true 
 
    }); 
 

 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    autocomplete = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (inputField), { 
 
     types: ['geocode'] 
 
    }); 
 

 
    // When the user selects an address from the dropdown, populate the address 
 
    // fields in the form. 
 
    autocomplete.addListener('place_changed', fillInAddress); 
 
} 
 

 
function fillInAddress() { 
 
    var place = autocomplete.getPlace(); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var addressString = ''; 
 

 
    if (place.geometry) { 
 
    bounds.extend(place.geometry.location); 
 
    marker.setPosition(place.geometry.location); 
 
    } 
 

 
    // Get each component of the address from the place details 
 
    // and fill the corresponding field on the form. 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
    // warning this only gets the first type of the component. E.g. 'sublocality_level_1' 
 
    var addressType = place.address_components[i].types[0]; 
 
    if (componentForm[addressType]) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     addressString += ' ' + val + ','; 
 
    } 
 
    } 
 
    // just remove the last comma 
 
    addressString = addressString.replace(/,\s*$/, ""); 
 
    inputField.value = addressString; 
 
    console.log(addressString); 
 
    map.fitBounds(bounds); 
 
    map.setZoom(14); 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="input-field col s6"> 
 
    <i class="material-icons prefix">home</i> 
 
    <input placeholder="Defina um endereço para seu fornecedor" id="pac-input" name="addressRouteTransporter" type="text" class="validate"> 
 
    <label for="addressRouteTransporter">Endereço:</label> 
 
</div> 
 
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&libraries=places&callback=initAutocomplete" async defer></script>