javascript - example - ¿Cómo agregar el cuadro de búsqueda Autocompletar de Google Maps?
maps autocomplete javascript (9)
Estoy intentando agregar un cuadro de búsqueda de autocompletado de Google a un sitio web para que los usuarios puedan buscar una dirección lo más fácilmente posible.
Mi problema es que he consultado numerosas preguntas aquí, así como la versión 3 de la API de JavaScript de Google Maps con respecto a esto y algunos tutoriales, pero todos combinan la funcionalidad de autocompletar con la asignación en un mapa de Google incrustado.
No necesito asignar la ubicación visualmente, solo necesito el cuadro de autocompletar por ahora, lamentablemente no puedo determinar qué partes de la API son relevantes para esto y cada ejemplo que he analizado incluye un montón de JS para mapeo.
¿Cómo SÓLO puedo agregar la funcionalidad de entrada de autocompletar?
Estoy usando jQuery aquí para obtener el texto ingresado y ajustar todo el código en $ (document) .ready (). Asegúrese de tener su clave API lista para el servicio web API de Google Places. Reemplácelo en el siguiente archivo de script.
<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>
Use el archivo de script para cargar la clase de autocompletar. Su archivo scripts.js se verá algo así.
// 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);
}
Para obtener latitud y longitud también, puede usar este código simple:
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script>
function initialize() {
var input = document.getElementById(''searchTextField'');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, ''place_changed'', function () {
var place = autocomplete.getPlace();
document.getElementById(''city2'').value = place.name;
document.getElementById(''cityLat'').value = place.geometry.location.lat();
document.getElementById(''cityLng'').value = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
</body>
</html>
Para usar las API de Google Maps / Places ahora, debe usar una clave de API. Entonces, la URL API cambiará de
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
a
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
Simplemente copia y pega el mismo código a continuación.
<!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>
El código bien formateado se puede encontrar desde este enlace. http://jon.kim/how-to-add-google-maps-autocomplete-search-box/
Una parte importante de este código puede eliminarse.
Extracto de HTML:
<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);
Puede ver un ejemplo en http://www.redwoodtransit.org .
Utilice la API de JavaScript de Google Maps con la biblioteca de lugares para implementar el cuadro de búsqueda Autocompletar de Google Maps en la página web.
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>
Puede encontrar la guía completa, el código fuente y la demostración en vivo desde aquí: cuadro de búsqueda de autocompletado de Google Maps con ventana de mapa e información
<!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>
<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>
// 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());
});
}
}