Autocomplete search address form using Google map and get data into form example

Autocomplete search address form using Google map and get data into form example

In this post we will give you information about Autocomplete search address form using Google map and get data into form example. Hear we will give you detail about Autocomplete search address form using Google map and get data into form exampleAnd how to use it also give you demo for it if it is necessary.

Autocomplete search address form using Google map and get data into form example

In this post, i will let you know how to implement autocomplete search address text field on Google map and show marker accordingly.

You will also know how to get data such as lat,lng,address from Google map to your html form.

This is very usefull for your application where you need to track your customer location.

You will get address and location coordinates on place change event handler of Google autocomplete textbox or even you move your marker in Google map.

You need to first inherit the Google Maps API script along with the places library.

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>Autocomplete search address form using google map and get data into form example </title>
  5. <scripttype="text/javascript"src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
  6. </head>
  7. <body>
  8. <inputid="searchInput"class="input-controls"type="text"placeholder="Enter a location">
  9. <divclass="map"id="map"style="width: 100%; height: 300px;"></div>
  10. <divclass="form_area">
  11.     <inputtype="text"name="location"id="location">
  12.     <inputtype="text"name="lat"id="lat">
  13.     <inputtype="text"name="lng"id="lng">
  14. </div>
  15. <script>
  16. /* script */
  17. function initialize() {
  18. var latlng = new google.maps.LatLng(28.5355161,77.39102649999995);
  19. var map = new google.maps.Map(document.getElementById('map'), {
  20. center: latlng,
  21. zoom: 13
  22. });
  23. var marker = new google.maps.Marker({
  24. map: map,
  25. position: latlng,
  26. draggable: true,
  27. anchorPoint: new google.maps.Point(0, -29)
  28. });
  29. var input = document.getElementById('searchInput');
  30. map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  31. var geocoder = new google.maps.Geocoder();
  32. var autocomplete = new google.maps.places.Autocomplete(input);
  33. autocomplete.bindTo('bounds', map);
  34. var infowindow = new google.maps.InfoWindow();
  35. autocomplete.addListener('place_changed', function() {
  36. infowindow.close();
  37. marker.setVisible(false);
  38. var place = autocomplete.getPlace();
  39. if (!place.geometry) {
  40. window.alert("Autocomplete's returned place contains no geometry");
  41. return;
  42. }
  43. // If the place has a geometry, then present it on a map.
  44. if (place.geometry.viewport) {
  45. map.fitBounds(place.geometry.viewport);
  46. } else {
  47. map.setCenter(place.geometry.location);
  48. map.setZoom(17);
  49. }
  50. marker.setPosition(place.geometry.location);
  51. marker.setVisible(true);
  52. bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
  53. infowindow.setContent(place.formatted_address);
  54. infowindow.open(map, marker);
  55. });
  56. // this function will work on marker move event into map
  57. google.maps.event.addListener(marker, 'dragend', function() {
  58.         geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
  59.         if (status == google.maps.GeocoderStatus.OK) {
  60.          if (results[0]) {
  61.          bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng());
  62.          infowindow.setContent(results[0].formatted_address);
  63.          infowindow.open(map, marker);
  64.          }
  65.         }
  66.         });
  67.     });
  68. }
  69. function bindDataToForm(address,lat,lng){
  70. document.getElementById('location').value = address;
  71. document.getElementById('lat').value = lat;
  72. document.getElementById('lng').value = lng;
  73. }
  74. google.maps.event.addDomListener(window, 'load', initialize);
  75. </script>
  76. </body>
  77. </html>
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete search address form using google map and get data into form example </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>
<body>
 <input id="searchInput"  type="text" placeholder="Enter a location">
 <div  id="map" style="width: 100%; height: 300px;"></div>
 <div >
 	<input type="text" name="location" id="location">
 	<input type="text" name="lat" id="lat">
 	<input type="text" name="lng" id="lng">
 </div>

<script>

/* script */

function initialize() {
   var latlng = new google.maps.LatLng(28.5355161,77.39102649999995);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: latlng,
      zoom: 13
    });
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
   });
    var input = document.getElementById('searchInput');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var geocoder = new google.maps.Geocoder();
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();   
    autocomplete.addListener('place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
  
        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
        }
       
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);          
    
        bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
        infowindow.setContent(place.formatted_address);
        infowindow.open(map, marker);
       
    });
    // this function will work on marker move event into map 
    google.maps.event.addListener(marker, 'dragend', function() {
		geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
		  if (results[0]) {        
		      bindDataToForm(results[0].formatted_address,marker.getPosition().lat(),marker.getPosition().lng());
		      infowindow.setContent(results[0].formatted_address);
		      infowindow.open(map, marker);
		  }
		}
		});
	});
}

function bindDataToForm(address,lat,lng){
   document.getElementById('location').value = address;
   document.getElementById('lat').value = lat;
   document.getElementById('lng').value = lng;

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

In above example, we define function bindDataToForm that is used to bind data into form field and showTooltip method.

You can add following CSS to look better your autocomplete search box over google map.

  1. <styletype="text/css">
  2.     .input-controls {
  3.      margin-top: 10px;
  4.      border: 1px solid transparent;
  5.      border-radius: 2px 0 0 2px;
  6.      box-sizing: border-box;
  7.      -moz-box-sizing: border-box;
  8.      height: 32px;
  9.      outline: none;
  10.      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  11.     }
  12.     #searchInput {
  13.      background-color: #fff;
  14.      font-family: Roboto;
  15.      font-size: 15px;
  16.      font-weight: 300;
  17.      margin-left: 12px;
  18.      padding: 0 11px 0 13px;
  19.      text-overflow: ellipsis;
  20.      width: 50%;
  21.     }
  22.     #searchInput:focus {
  23.      border-color: #4d90fe;
  24.     }
  25. </style>
<style type="text/css">
	.input-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);
	}
	#searchInput {
	  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%;
	}
	#searchInput:focus {
	  border-color: #4d90fe;
	}
</style>

In above example,when you select address from autocomplete text field then a place change trigger occur and you get the details into your form field, In same way when you drag a marker to a different location on map then marker dragend event fired and generate the Latitude, Longitude and postal address of that location where you place the marker which you can get into your form.

Show Demo

Label :

Google API

HTML

jQuery

How To

API

Web Development

JavaScript

Hope this code and post will helped you for implement Autocomplete search address form using Google map and get data into form example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

89  +    =  99

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US