Quick Start
Address Autocomplete
Adding Address Autocomplete to any webpage is easy!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Add the Search Box DIV within your HTML code <div id="search-box"></div> <script type="text/javascript"> // Initialize an empty map without layers (invisible map) var map = L.map('map', { }); //Initialize the geocoder var geocoderControl = new L.control.geocoder('[YOUR_API_KEY]', geocoderControlOptions).addTo(map).on('select', function (e) { }); //Get the "search-box" div var searchBoxControl = document.getElementById("search-box"); //Get the geocoder container from the leaflet map var geocoderContainer = geocoderControl.getContainer(); //Append the geocoder container to the "search-box" div searchBoxControl.appendChild(geocoderContainer); </script> |
Fill Form
Automatically fill out form details based on the Address Autocomplete results.
Billing Address
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<form action="/billing" class="form"> <div id="search-box-form"></div> <div class="col-md-6"> <label class="control-label">Street address</label> <input class="form-control" id="street_number" disabled="true"> </div> <div class="col-md-6"> <label class="control-label">City</label> <input class="form-control field" id="city" disabled="true"> </div> <div class="col-md-6"> <label class="control-label">State</label> <input class="form-control" id="state" disabled="true"> </div> <div class="col-md-6"> <label class="control-label">Zip code</label> <input class="form-control" id="postal_code" disabled="true"> </div> </form> |
Map Display
View a map with the results from the Address Autocomplete.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<style type="text/css"> body { margin: 0; } #map { width: 550px; height: 550px; } </style> <div id="map"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script> <script type="text/javascript" src="js/leaflet-geoplaces.js?v=1.29"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css"> <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script> <link rel="stylesheet" href="https://geoplaces.co/maps/leaflet-geocoder-geoplaces.min.css"> <script src="https://geoplaces.co/maps/leaflet-geocoder-geoplaces.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/3.0.2/control/Permalink.js"></script> <script type="text/javascript"> // Maps access token goes here var key = '[YOUR_API_KEY]'; // Add layers that we need to the map var streets = L.tileLayer.Geoplaces({key: key, scheme: "streets"}); var earth = L.tileLayer.Geoplaces({key: key, scheme: "earth"}); var hybrid = L.tileLayer.Geoplaces({key: key, scheme: "hybrid"}); // Initialize the map var map = L.map('map', { center: [40.0904, -105.3856], // Map loads with this location as center zoom: 12, scrollWheelZoom: true, layers: [streets], zoomControl: false }); L.control.zoom({ position:'topright' }).addTo(map); // Add the 'layers' control L.control.layers({ "Streets": streets, "Earth": earth, "Hybrid": hybrid, }, null, { position: "topright" }).addTo(map); // Add the 'scale' control L.control.scale().addTo(map); L.control.locate({ position: "bottomright" }).addTo(map); L.control.geocoder(key, { // placeholder: 'Search nearby', url: "https://geoplaces.co/nom", expanded: true, panToPoint: true, focus: true, position: "topleft" }).addTo(map); map.addControl(new L.Control.Permalink({ useLocation: true, text: null })); (function(){ var originalInitTile = L.GridLayer.prototype._initTile L.GridLayer.include({ _initTile: function (tile) { originalInitTile.call(this, tile); var tileSize = this.getTileSize(); tile.style.width = tileSize.x + 1 + 'px'; tile.style.height = tileSize.y + 1 + 'px'; } }); })() </script> |