Call Anytime
+92 (8800) - 8960
Try For Free

Post Details

How to integrate Google Maps Autocomplete Search Only One Country
20 Sep

How to integrate Google Maps Autocomplete Search Only One Country

Hi Guys,

In this tutorial, we will learn about How to integrate Google Maps Autocomplete Search Only One Country.

Let's begin tutorial

<!DOCTYPE html>
<html>
<head>
    <title>How to integrate Google Maps Autocomplete Search Only One Country</title>
    <style type="text/css">
        .map-controls {
            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="map-controls" 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>

 

0 Comments

Leave a Comment

Latest Posts

All Categories