HDTuto.com

How to Search a Specific Area on Google Maps?



Now, let's see article of google maps api show only one country. we will help you to give example of google maps api search only one country. you can see autocomplete search only one country google map. This tutorial will give you simple example of google map search specific country only.

We are using google map autocomplete for choosing address with latitude and longitude. but if you require to search only one country like in, us, uk etc then you can do it using setComponentRestrictions option in google map.

In bellow example you can see how restrict other country for autocomplete search with google map api. so let's see bellow example, you can search only india country.

You can do it like this way, i added search only for india and us now:

autocomplete.setComponentRestrictions({'country': ['in', 'us']});

You can see bellow full example:

Example:

<!DOCTYPE html>

<html>

<head>

<title>Autocomplete Address Search Box using Google Maps Javascript API</title>

<style type="text/css">

.mapControls {

margin-top: 10px;

border: 1px solid transparent;

border-radius: 2px 0 0 2px;

box-sizing: border-box;

-moz-box-sizing: border-box;

height: 32px;

outline: none;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}

#searchMapInput {

background-color: #fff;

font-family: Roboto;

font-size: 15px;

font-weight: 300;

margin-left: 12px;

padding: 0 11px 0 13px;

text-overflow: ellipsis;

width: 50%;

}

#searchMapInput:focus {

border-color: #4d90fe;

}

</style>

</head>

<body>

<h1>Autocomplete Address Search Box using Google Maps Javascript API</h1>

<input id="searchMapInput" class="mapControls" type="text" placeholder="Enter a location">

<ul id="geoData">

<li>Full Address: <span id="location-snap"></span></li>

<li>Latitude: <span id="lat-span"></span></li>

<li>Longitude: <span id="lon-span"></span></li>

</ul>

<script>

function initMap() {

var input = document.getElementById('searchMapInput');

var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.setComponentRestrictions({'country': ['in']});

autocomplete.addListener('place_changed', function() {

var place = autocomplete.getPlace();

document.getElementById('location-snap').innerHTML = place.formatted_address;

document.getElementById('lat-span').innerHTML = place.geometry.location.lat();

document.getElementById('lon-span').innerHTML = place.geometry.location.lng();

});

}

</script>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>

</body>

</html>

I hope it can help you...




May 9, 2020 | Category : JQuery



Blog Search