javascript - example - busqueda google maps api
Cómo limitar los resultados de autocompletar de google a solo ciudad y país (8)
¡También necesitarás acercar y centrar el mapa debido a las restricciones de tu país!
Solo usa los parámetros de zoom y centrar! ;)
function initialize() {
var myOptions = {
zoom: countries[''us''].zoom,
center: countries[''us''].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false
};
... all other code ...
}
Estoy usando google autocompletar lugares javascript para devolver los resultados sugeridos para mi cuadro de búsqueda, lo que necesito es mostrar solo la ciudad y el país relacionados con los caracteres ingresados pero google api dará muchos resultados de lugares generales que no necesito, entonces ¿cómo? limitar el resultado para mostrar solo la ciudad y el país.
Estoy usando el siguiente ejemplo:
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById(''searchTextField'');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
Encontré una solución para mí
var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];
acService.getPlacePredictions({
types: [''(regions)'']
}, function(predictions) {
predictions.forEach(function(prediction) {
if (prediction.types.some(function(x) {
return x === "country" || x === "administrative_area1" || x === "locality";
})) {
if (prediction.terms.length < 3) {
autocompleteItems.push(prediction);
}
}
});
});
esta solución solo muestra ciudad y país ..
He estado jugando un poco con la API de autocompletado de Google y esta es la mejor solución que pude encontrar para limitar tus resultados a solo países:
var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components
for(var i = 0; i < result.address_components.length; i += 1) {
var addressObj = result.address_components[i];
for(var j = 0; j < addressObj.types.length; j += 1) {
if (addressObj.types[j] === ''country'') {
console.log(addressObj.types[j]); // confirm that this is ''country''
console.log(addressObj.long_name); // confirm that this is the country name
}
}
}
Si observa el objeto resultante que se devuelve, verá que hay un conjunto de direcciones_componentes que contendrá varios objetos que representan diferentes partes de una dirección. Dentro de cada uno de estos objetos, contendrá una matriz de "tipos" y dentro de esta matriz de "tipos", verá las diferentes etiquetas asociadas con una dirección, incluida una para el país.
La answer dada por Francois resulta en una lista de todas las ciudades de un país. Pero si el requisito es incluir todas las regiones (ciudades + estados + otras regiones, etc.) en un país o en los establecimientos del país, puede filtrar los resultados en consecuencia cambiando los tipos.
Listar solo ciudades en el país
var options = {
types: [''(cities)''],
componentRestrictions: {country: "us"}
};
Listar todas las ciudades, estados y regiones del país
var options = {
types: [''(regions)''],
componentRestrictions: {country: "us"}
};
Haga una lista de todos los establecimientos, como restaurantes, tiendas y oficinas en el país
var options = {
types: [''establishment''],
componentRestrictions: {country: "us"}
};
Más información y opciones disponibles en
https://developers.google.com/maps/documentation/javascript/places-autocomplete
Espero que esto pueda ser útil para alguien
Puedes probar la restricción del país
function initialize() {
var options = {
types: [''(cities)''],
componentRestrictions: {country: "us"}
};
var input = document.getElementById(''searchTextField'');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
Más información:
ISO 3166-1 alpha-2 se puede usar para restringir los resultados a grupos específicos. Actualmente, puedes usar Restricciones de componente para filtrar por país.
El país debe aprobarse como un código de país compatible con ISO 3166-1 Alpha-2 de dos caracteres.
prueba esto
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById(''searchTextField'');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places "type =" text / javascript "
Cambie esto a: "region = in" (in = india)
" http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in " type = "text / javascript"
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById(''searchTextField'');
var options = {
types: [''geocode''] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
var options = {
types: [''geocode''] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
referencia a otros tipos: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2
<html>
<head>
<title>Example Using Google Complete API</title>
</head>
<body>
<form>
<input id="geocomplete" type="text" placeholder="Type an address/location"/>
</form>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete();
});
</script>
</body>
</html>
Para más información visita este enlace