Использование google-адреса api для поиска бизнеса

Question

Я создал следующий пример ниже на витрине, чтобы клиенты могли искать их адрес и иметь возможность автозаполнения каждого входа.

Google Api example

Большинство наших клиентов являются предприятия, так что я хотел бы сделать это так, вы можете искать бизнес, и он возвращает адрес. Возможно ли это с помощью API адресов Google?

Answer 1

Изменено example in the documentation, чтобы удалить ограничение по адресам (удалено {types: ['geocode']}), добавлено «имя» в форму.

// This example displays an address form, using the autocomplete feature 
 
// of the Google Places API to help users fill in the information. 
 

 
var placeSearch, autocomplete; 
 
var componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    locality: 'long_name', 
 
    administrative_area_level_1: 'short_name', 
 
    country: 'long_name', 
 
    postal_code: 'short_name' 
 
}; 
 

 
function initAutocomplete() { 
 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    autocomplete = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (document.getElementById('autocomplete'))); 
 

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

 
// [START region_fillform] 
 
function fillInAddress() { 
 
    // Get the place details from the autocomplete object. 
 
    var place = autocomplete.getPlace(); 
 
    if (place.name) { 
 
     document.getElementById("businessName").value = place.name; 
 
     document.getElementById("businessName").disabled = false; 
 
    } 
 
    for (var component in componentForm) { 
 
     document.getElementById(component).value = ''; 
 
     document.getElementById(component).disabled = false; 
 
    } 
 

 
    // 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++) { 
 
     var addressType = place.address_components[i].types[0]; 
 
     if (componentForm[addressType]) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     document.getElementById(addressType).value = val; 
 
     } 
 
    } 
 
    } 
 
    // [END region_fillform] 
 

 
// [START region_geolocation] 
 
// Bias the autocomplete object to the user's geographical location, 
 
// as supplied by the browser's 'navigator.geolocation' object. 
 
function geolocate() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
     var geolocation = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
     }; 
 
     var circle = new google.maps.Circle({ 
 
      center: geolocation, 
 
      radius: position.coords.accuracy 
 
     }); 
 
     autocomplete.setBounds(circle.getBounds()); 
 
     }); 
 
    } 
 
    } 
 
    // [END region_geolocation] 
 
google.maps.event.addDomListener(window, 'load', initAutocomplete)

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="locationField"> 
 
    <input id="autocomplete" placeholder="Enter your address" type="text" /> 
 
</div> 
 

 
<table id="address"> 
 
    <tr> 
 
    <td class="label">Name</td> 
 
    <td class="slimField"> 
 
     <input class="field" id="businessName" disabled="true" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="label">Street address</td> 
 
    <td class="slimField"> 
 
     <input class="field" id="street_number" disabled="true" /> 
 
    </td> 
 
    <td class="wideField" colspan="2"> 
 
     <input class="field" id="route" disabled="true" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="label">City</td> 
 
    <td class="wideField" colspan="3"> 
 
     <input class="field" id="locality" disabled="true" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="label">State</td> 
 
    <td class="slimField"> 
 
     <input class="field" id="administrative_area_level_1" disabled="true" /> 
 
    </td> 
 
    <td class="label">Zip code</td> 
 
    <td class="wideField"> 
 
     <input class="field" id="postal_code" disabled="true" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="label">Country</td> 
 
    <td class="wideField" colspan="3"> 
 
     <input class="field" id="country" disabled="true" /> 
 
    </td> 
 
    </tr> 
 
</table>