Jak dodać pole wyszukiwania autouzupełniania Google Maps?

Próbuję dodać pole wyszukiwania autouzupełniania Google do witryny, aby użytkownicy mogli wyszukiwać adresy tak łatwo, jak to możliwe.Jak dodać pole wyszukiwania autouzupełniania Google Maps?

Mój problem polega na tym, że sprawdziłem tutaj wiele pytań, a także Google Maps JavaScript API v3 w odniesieniu do tego i niektórych samouczków, ale wszystkie one łączą funkcje autouzupełniania z mapowaniem ich na osadzonej mapie Google.

Nie muszę mapować lokalizacji wizualnie, potrzebuję tylko pola autouzupełniania na teraz, niestety nie mogę się domyślić, które części interfejsu API są odpowiednie do tego i każdy przykład, na który patrzę, zawiera mnóstwo JS dla mapowanie.

Czy ktoś wie z zasobu, który zajmuje się tylko dodanie funkcjonalności wejściowego autouzupełniania.

Strona jest here.

Po kliknięciu na 'cytatem Kalkulator >>> „transport” >>> „Collect” pojawi się pole wprowadzania, w których chciałbym dodać tę funkcjonalność.

Nie pytam nikogo wykonywać moją pracę dla mnie, żeby mi pomóc znaleźć to, czego potrzebuję.

Dzięki z góry.

Źródło

2012-12-03 Dom

możliwe duplikat [Jak zintegrować SearchBox w Google Maps JavaScript API v3?] (Http://stackoverflow.com/questions/12745469/how-to-integrate-searchbox-in-google- maps-javascript-api-v3) – givanse

Znaczna część tego kodu mogą być wyeliminowane.

HTML fragment:

<head> 
    ... 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    ... 
</head> 
<body> 
    ... 
    <input id="searchTextField" type="text" size="50"> 
    ... 
</body>

Javascript:

function initialize() { 
    var input = document.getElementById('searchTextField'); 
    new google.maps.places.Autocomplete(input); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

można zobaczyć przykład w http://www.redwoodtransit.org.

Źródło

2013-05-08 22:38:45

cześć, czy możesz udostępnić kod źródłowy dla tego przykładu ... dziękuję –

to pomogło mi bardzo z tym samym problemem, co plakat. dzięki! –

Dziękuję bardzo :) –

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
    <script> 
// 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 initialize() { 
    // Create the autocomplete object, restricting the search 
    // to geographical location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'] }); 
    // When the user selects an address from the dropdown, 
    // populate the address fields in the form. 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

// [START region_fillform] 
function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    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 = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 
     var circle = new google.maps.Circle({ 
     center: geolocation, 
     radius: position.coords.accuracy 
     }); 
     autocomplete.setBounds(circle.getBounds()); 
    }); 
    } 
} 
// [END region_geolocation] 

    </script> 

    <style> 
     #locationField, #controls { 
     position: relative; 
     width: 480px; 
     } 
     #autocomplete { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 99%; 
     } 
     .label { 
     text-align: right; 
     font-weight: bold; 
     width: 100px; 
     color: #303030; 
     } 
     #address { 
     border: 1px solid #000090; 
     background-color: #f0f0ff; 
     width: 480px; 
     padding-right: 2px; 
     } 
     #address td { 
     font-size: 10pt; 
     } 
     .field { 
     width: 99%; 
     } 
     .slimField { 
     width: 80px; 
     } 
     .wideField { 
     width: 200px; 
     } 
     #locationField { 
     height: 20px; 
     margin-bottom: 2px; 
     } 
    </style> 
    </head> 

    <body onload="initialize()"> 
    <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input> 
    </div> 


    </body> 
</html>

Źródło

2015-06-23 05:14:49

Dlaczego po prostu nie prześlesz linku do dokumentacji API, zamiast kopiować go bez odniesienia do niego? – dft

Wystarczy skopiować i wkleić poniższy kod identyfikacyjny.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://maps.googleapis.com/maps/api/jsvv=3.exp&sensor=false&libraries=places"></script> 
    </head> 
    <body> 
     <label for="locationTextField">Location</label> 
     <input id="locationTextField" type="text" size="50"> 

     <script> 
      function init() { 
       var input = document.getElementById('locationTextField'); 
       var autocomplete = new google.maps.places.Autocomplete(input); 
      } 

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

Dobrze sformatowany kod można znaleźć pod tym linkiem. http://jon.kim/how-to-add-google-maps-autocomplete-search-box/

Źródło

2015-11-06 21:11:43 shupacanucks

Użyj Google Maps JavaScript API z biblioteką miejsc, aby zaimplementować wyszukiwarkę Google Maps Autocomplete na stronie.

HTML

<input id="searchInput" class="controls" type="text" placeholder="Enter a location">

JavaScript

<script> 
function initMap() { 
    var input = document.getElementById('searchInput'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
} 
</script>

Complete Guide, kod źródłowy, a demo na żywo można znaleźć tutaj - Google Maps Autocomplete Search Box with Map and Info Window

Źródło

2016-06-21 07:07:09 JoyGuru

// 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(poenter code heresition) { 
     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()); 
    }); 
    } 
}

Źródło

2016-10-18 07:23:07 user7035091

Aby korzystać z Google Maps/Places API teraz, musisz użyć klucza API.Więc URL API zmieni się z

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Źródło

2016-10-26 14:18:50

używam jQuery tutaj, aby uzyskać zadany tekst i owijania cały kod w $ (document) .ready(). Upewnij się, że masz gotowy klucz API do usługi sieciowej Google Places API. Zastąp go w poniższym pliku skryptu.

<input type="text" id="location"> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script> 
<script src="javascripts/scripts.js"></scripts>

Użyj pliku skryptu, aby załadować klasę autouzupełniania. Twój plik scripts.js będzie wyglądał mniej więcej tak.

// scripts.js custom js file 
$(document).ready(function() { 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

function initialize() { 
    var input = document.getElementById('location'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
}

Źródło

2017-11-13 18:46:28

<input id="autocomplete" placeholder="Enter your address" type="text"/> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="https://mapenter code heres.googleapis.com/maps/api/js?key=AIzaSyC7vPqKI7qjaHCE1SPg6i_d1HWFv1BtODo&libraries=places"></script> 
<script type="text/javascript"> 
    function initialize() { 

     new google.maps.places.Autocomplete(
     (document.getElementById('autocomplete')), { 
      types: ['geocode'] 
     }); 
    } 

    initialize(); 

</script>

Źródło

2017-11-20 10:30:56

Jak dodać pole wyszukiwania autouzupełniania Google Maps?

Odpowiedz

Powiązane problemy