Limit google startup location to a specific city
I am using google autocomplete addresses API to fill in places, but what I want, after filling in a city, the address text box should only show addresses of addresses in that city for not all addresses. Below is the html code for city and address
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loca" name="City" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="locb" name="Location" class="form-control" >
</div>
</div>
Script for google api address suggestions
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
source to share
As far as I know, the google API does not currently support binding by city name. Hence, you must use longitude and latitude to set the boundaries or area around the city of your choice (e.g. obj.geometry.viewport).
The viewpoint will return streets not only from the city you selected, but also from cities, for example, if you select New York, it will return results from New York and Brooklyn. So in my suggested code, autocomplete will suggest you results from both neighboring cities, but then the code will parse the user and choose if the cities are the same, if the cities are not the same, it will set both fields to an empty string.
Also the way I wrote my code is that autocomplete in the second field will only be enabled after a selection has been made in the first field. Your best bet is to make the second field, only the first field is selected, but this is something you have to do yourself. Also, there is a potential bug related to how autocomplete stores previously selected values, if you want your code to function 100% you could clear the cash from the autocomplete function or the fields themselves instead of $ ("# locb") ... Val ('');
var autocompleteA = new google.maps.places.Autocomplete($("#loca")[0], { types: ['(cities)'] });
google.maps.event.addListener(autocompleteA, 'place_changed', function () {
var placeA = autocompleteA.getPlace();
var boundsByViewport = autocompleteA.getPlace().geometry.viewport;
var autocompleteB = new google.maps.places.Autocomplete($("#locb")[0], {
bounds: boundsByViewport,
types: ['address']
});
google.maps.event.addListener(autocompleteB, 'place_changed', function () {
var placeB = autocompleteB.getPlace();
var match = false;
for (var i = 0; i < placeB.address_components.length; i++) {
if ((placeA.address_components[0]).long_name === (placeB.address_components[i].long_name)) {
{ //"The city names matched"
//do what you need with it
alert("City is the same");
match = true;
break;
}
}
}
if (!match) { //warn that it is not the right adress
alert("The city names didn't match.");
//clear value of the Location field
$("#loca").val('');
$("#locb").val('');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<body>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loca" name="City" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="locb" name="Location" class="form-control">
</div>
</div>
</body>