Search Address Autocomplete with Link to a Map

Submitted by alpha_luna on Thursday, July 14, 2016 - 16:00.

Search Address Autocomplete with Link to a Map

If you are looking for Search Address Autocomplete with Link to a Map then you are at the right place. We are going to use the Leaflet JavaScript library to display those places in the map automatically that the user enters their desired address to search in the Textbox. You can use this program in your website or systems for the user to search their desired location or address that they want. User enter the address or location that they want, then it will display those places in dropdown element and they can select the address that they want to, and it will appear on the map automatically.

Creating Markup

Let's create markup, it consists one TextBox for the user where they can enter their desired address or location to search and our map.
  1. <div id="map_Contatiner">
  2. </div>
  3.  
  4. <input type="search" id="insert_Location" class="form-control" placeholder="Type an Address . . . . ." />

JavaScript Code

This script used to locate the address or location to display automatically on the map.
  1. <script src="places.min.js"></script>
  2. <script>
  3. (function() {
  4.   var placesAutocomplete = places({
  5.     container: document.querySelector('#insert_Location')
  6.   });
  7.  
  8.   var map = L.map('map_Contatiner', {
  9.     scrollWheelZoom: false,
  10.     zoomControl: false
  11.   });
  12.  
  13.   var osmLayer = new L.TileLayer(
  14.     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  15.       minZoom: 1,
  16.       maxZoom: 13,
  17.       attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
  18.     }
  19.   );
  20.  
  21.   var markers = [];
  22.  
  23.   map.setView(new L.LatLng(0, 0), 1);
  24.   map.addLayer(osmLayer);
  25.  
  26.   placesAutocomplete.on('suggestions', handleOnSuggestions);
  27.   placesAutocomplete.on('cursorchanged', handleOnCursorchanged);
  28.   placesAutocomplete.on('change', handleOnChange);
  29.   placesAutocomplete.on('clear', handleOnClear);
  30.  
  31.   function handleOnSuggestions(e) {
  32.     markers.forEach(removeMarker);
  33.     markers = [];
  34.  
  35.     if (e.suggestions.length === 0) {
  36.       map.setView(new L.LatLng(0, 0), 1);
  37.       return;
  38.     }
  39.  
  40.     e.suggestions.forEach(addMarker);
  41.     findBestZoom();
  42.   }
  43.  
  44.   function handleOnChange(e) {
  45.     markers
  46.       .forEach(function(marker, markerIndex) {
  47.         if (markerIndex === e.suggestionIndex) {
  48.           markers = [marker];
  49.           marker.setOpacity(1);
  50.           findBestZoom();
  51.         } else {
  52.           removeMarker(marker);
  53.         }
  54.       });
  55.   }
  56.  
  57.   function handleOnClear() {
  58.     map.setView(new L.LatLng(0, 0), 1);
  59.     markers.forEach(removeMarker);
  60.   }
  61.  
  62.   function handleOnCursorchanged(e) {
  63.     markers
  64.       .forEach(function(marker, markerIndex) {
  65.         if (markerIndex === e.suggestionIndex) {
  66.           marker.setOpacity(1);
  67.           marker.setZIndexOffset(1000);
  68.         } else {
  69.           marker.setZIndexOffset(0);
  70.           marker.setOpacity(0.5);
  71.         }
  72.       });
  73.   }
  74.  
  75.   function addMarker(suggestion) {
  76.     var marker = L.marker(suggestion.latlng, {opacity: .4});
  77.     marker.addTo(map);
  78.     markers.push(marker);
  79.   }
  80.  
  81.   function removeMarker(marker) {
  82.     map.removeLayer(marker);
  83.   }
  84.  
  85.   function findBestZoom() {
  86.     var featureGroup = L.featureGroup(markers);
  87.     map.fitBounds(featureGroup.getBounds().pad(0.5), {animate: false});
  88.   }
  89. })();
  90. </script>

Output

This form where the user can search their desired address or location as shown in the image below. Result After typing of address or location to the TextBox, it will automatically show on the map the list of places as you can see in the image below. Result Kindly click the "Download Code" button below for full source code. Thank you very much. Hope that this tutorial will help you a lot. If you are interested in programming, we have an example of programs that may help you even just in small ways. If you want more tutorials, you can visit our website, click here. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Google Map
Mapping
Javascript
geolocation

Add new comment

About text formats
  • 426 views