How to use google autocomplete address search box with maps
In this tutorial, we will discuss how to use the google autocomplete address search box with maps. I would like to share with you Autocomplete Address Search Box with Map Example – Google Maps API. we will create a simple example with google places autocomplete places search box and show it on the map, we also display latitude, longitude, and place using google maps javascript API. we simply get latitude, longitude, and location name according to the place autocomplete search box.
This example creates a map with a autocomplete address search box for users to enter geographical searches.
index.html
<!DOCTYPE html>
<html>
<head>
<title>How to use google autocomplete address search box with maps - devnote.in</title>
<style type="text/css">
#map {
width: 100%;
height: 350px;
}
.mapClass {
border: 1px solid transparent;
margin-top: 15px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 35px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#searchInput {
font-family: 'Roboto';
background-color: #fff;
font-size: 16px;
text-overflow: ellipsis;
margin-left: 16px;
font-weight: 400;
width: 50%;
padding: 0 11px 0 13px;
}
#searchInput:focus {
border-color: #4d90fe;
}
</style>
</head>
<body>
<h1>How to use google autocomplete address search box with maps - devnote.in</h1>
<input id="searchInput" class="mapClass" type="text" placeholder="Enter a location">
<div id="map"></div>
<ul>
<li>Address: <span id="address_display"></span></li>
<li>Latitude: <span id="latitude_display"></span></li>
<li>Longitude: <span id="longitude_display"></span></li>
</ul>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 22.611055454616626, lng: 70.72304745531825},
zoom: 14
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
/* Location details */
document.getElementById('address_display').innerHTML = place.formatted_address;
document.getElementById('latitude_display').innerHTML = place.geometry.location.lat();
document.getElementById('longitude_display').innerHTML = place.geometry.location.lng();
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places,geometry" async defer></script>
</body>
</html>Output
