Maybe I\u2019m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my 12-digit credit card number for every new e-commerce site I visit, nor have to save my credit card details with them.<\/p>\n
For the second, the only time-saving option given by most shopping websites is to save your shipping address, but you still have to fill the form (arrghh!). This is where the challenge is. I’ve had most of my orders returned because my address (which I thought<\/em> was the right address) could not be located or confirmed by the app for one reason or another.<\/p>\n <\/p>\n Getting a user’s address through an input form is a clean solution but can also be a herculean task to the user. Here’s why:<\/p>\n Getting the user’s address by the tap\/click of a button. Yup, that’s easy! The UX is great as it saves the user both the time and effort of filling out some form. It will also save the store owner time, effort, and even money in some cases, as there’ll likely be a reduction in the number of incorrectly placed orders or shipments. <\/p>\n Let\u2019s build a mini app that gets a user’s address and shows it on a Google Map interface using vanilla JavaScript. The concept is as follows:<\/p>\n To build this app, we\u2019re going to use the Materialize CSS framework to save us some time fussing with styles. Materialize is a modern responsive front-end framework based on Google\u2019s Material Design system<\/a>. The beta version<\/a> works with vanilla JavaScript.<\/p>\n A basic setup using Materialize\u2019s CSS and JavaScript files in a document is like this:<\/p>\n We\u2019re also going to use the Google Maps API for displaying the map and getting the user’s human-readable address. We\u2019ll need an API key to do this. Here\u2019s how to get one:<\/p>\n Now, let\u2019s update our document to show the map and let the user know it can be used to get their current location as the address. Also, we will add a form that\u2019s pre-filled with the address the user selects.<\/p>\n While we are here, let’s style things a bit to make this look a little better:<\/p>\n This CSS hides the map until we are ready to view it. Our app should look like this:<\/p>\n Our app will be making use of the HTML5 Geolocation API<\/a> to determine our user’s current location as well as Google’s Geocode API with a technique called Reverse Geocoding. The Geocode API takes a human-readable address and changes it into geographical (latitudinal and longitudinal) coordinates and marks the spot in the map. <\/p>\n Reverse Geocoding does the reverse. It takes the latitude and longitude and converts them to human-readable addresses. Geocoding and Reverse Geocoding are well documented.<\/a><\/p>\n Here\u2019s how our app will work:<\/p>\n Most times, the geocode returns more than one address<\/em>, so we would have to show the user all the returned addresses and let them choose the most accurate one.<\/p>\n Phew!<\/em> Finally, we can get to the fun part of actually writing the JavaScript. Let\u2019s go through each of the steps we outlined.<\/p>\n In our When the click handler for our button runs, it:<\/p>\n When our When we have support, it calls geolocation’s If there is support, then the Before writing our Now, let\u2019s write the code for our We now have our user’s latitude and longitude and we can view them in the console by writing the code below inside To do this, we will be adding these lines of code to our The first line takes our The second line of code calls a The third line invokes a The fourth line makes the Now, let’s get to creating our functions. We will start with the The To create a map instance, we specify two parameters in the constructor: the Let’s create our marker using the A few things to note in this code:<\/p>\n So far, our user’s location has been fetched, the map has rendered and the user can see their current location on the map. Things are looking good! 🕺<\/p>\n Google’s Geocoding API will be used to convert our user’s numeric geographical coordinates to a formatted, human-readable address using the reverse<\/strong> geocoding<\/strong> process we covered earlier.<\/p>\n The URL takes this form:<\/p>\n …where the Our request URL will look like this:<\/p>\n Let’s go ahead and connect to the API. We would do this in a function called Address inputs are challenging<\/h3>\n
\n
A potential solution: get the address automatically<\/h3>\n
\n
Getting started and setting up<\/h3>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Address Locator<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-beta\/css\/materialize.min.css\">\r\n <link rel=\"stylesheet\" href=\"css\/main.css\">\r\n<\/head>\r\n<body>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-beta\/js\/materialize.min.js\"><\/script>\r\n <script src=\"js\/main.js\"><\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n\n
...\r\n\r\n<body>\r\n <div class=\"container\">\r\n <h3>Shipping Address<\/h3>\r\n <p>You can click the button below to use your current location as your shipping address<\/p>\r\n <div id=\"map\">\r\n <\/div>\r\n <button id=\"showMe\" class=\"btn\">Use My Location<\/button>\r\n <form id=\"shippingAddress\">\r\n <div id=\"locationList\"><\/div>\r\n <br>\r\n <div class=\"input-field\">\r\n <textarea class=\"input_fields materialize-textarea\" id=\"address\" type=\"text\"><\/textarea>\r\n <label class=\"active\" for=\"address\">Address (Area and Street)<\/label>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <input class=\"input_fields\" id=\"locality\" type=\"text\">\r\n <label class=\"active\" for=\"locality\">Locality<\/label>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <input class=\"input_fields\" id=\"city\" type=\"text\">\r\n <label class=\"active\" for=\"city\">City\/District\/Town<\/label>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <input class=\"input_fields\" id=\"postal_code\" type=\"text\">\r\n <label class=\"active\" for=\"pin_code\">Pin Code<\/label>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <input class=\"input_fields\" id=\"landmark\" type=\"text\">\r\n <label class=\"active\" for=\"landmark\">Landmark<\/label>\r\n <\/div>\r\n <div class=\"input-field\">\r\n <input class=\"input_fields\" id=\"state\" type=\"text\">\r\n <label class=\"active\" for=\"State\">State<\/label>\r\n <\/div>\r\n <\/form>\r\n <!-- You could add a fallback address gathering form here -->\r\n <\/div>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-beta\/js\/materialize.min.js\"><\/script>\r\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY\"><\/script>\r\n <script src=\"js\/main.js\"><\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n.container {\r\n width: 50%;\r\n max-width: 800px;\r\n}\r\n\r\n#map {\r\n height: 50vh;\r\n margin-bottom: 10px;\r\n display: none;\r\n}\r\n\r\n#locationList .card {\r\n padding: 10px;\r\n}\r\n\r\n#toast-container {\r\n top: 50%;\r\n bottom: unset;\r\n}\r\n\r\n.toast {\r\n background-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n@media only screen and (max-width: 768px) {\r\n .container {\r\n width: 80%;\r\n }\r\n}<\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/map-form-1.png?ssl=1\")
<\/figure>\nLet\u2019s plan this out<\/h3>\n
\n
navigator.geolocation<\/code>)<\/li>\nStep 1: Clicking the button<\/h4>\n
main.js<\/code> file, let’s get a reference to the HTML button. While we are at it, we\u2019ll set up some other variables we\u2019ll need, like our API key.<\/p>\n\/\/This div will display Google map\r\nconst mapArea = document.getElementById('map');\r\n\r\n\/\/This button will set everything into motion when clicked\r\nconst actionBtn = document.getElementById('showMe');\r\n\r\n\/\/This will display all the available addresses returned by Google's Geocode Api\r\nconst locationsAvailable = document.getElementById('locationList');\r\n\r\n\/\/Let's bring in our API_KEY\r\nconst __KEY = 'YOUR_API_KEY';\r\n\r\n\/\/Let's declare our Gmap and Gmarker variables that will hold the Map and Marker Objects later on\r\nlet Gmap;\r\nlet Gmarker;\r\n\r\n\/\/Now we listen for a click event on our button\r\nactionBtn.addEventListener('click', e => {\r\n \/\/ hide the button \r\n actionBtn.style.display = \"none\";\r\n \/\/ call Materialize toast to update user \r\n M.toast({ html: 'fetching your current location', classes: 'rounded' });\r\n \/\/ get the user's position\r\n getLocation();\r\n});<\/code><\/pre>\n\n
getLocation<\/code> function<\/li>\n<\/ol>\nStep 2: Get the user’s location (latitude and longitude)<\/h4>\n
getLocation<\/code> function is invoked, we need to do some more work. First, let\u2019s check if we can even use the Geolocation API:<\/p>\ngetLocation = () => {\r\n \/\/ check if user's browser supports Navigator.geolocation\r\n if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(displayLocation, showError, options);\r\n } else {\r\n M.toast({ html: \"Sorry, your browser does not support this feature... Please Update your Browser to enjoy it\", classes: \"rounded\" });\r\n }\r\n}<\/code><\/pre>\ngetCurrentPosition<\/code> method. If it doesn’t have support, then the user is alerted that there’s no browser support.<\/p>\ngetCurrentLocation<\/code> method is used to get the current location of the device. The syntax is like this:<\/p>\nnavigator.geolocation.getCurrentPosition(*success, error, [options]*)<\/code><\/pre>\n\n
success<\/code> : This is a callback function that takes a position as its only parameter. For us, our success callback function is the displayLocation<\/code> function.<\/li>\nerror<\/code> : [optional] This is a callback function that takes a PositionError<\/code> as its sole input parameter. You can read more about this here<\/a>. Our error callback function is the showError<\/code> function.<\/li>\noptions<\/code> : [optional] This is an object which describes the options<\/code> property to be passed to the getCurrentPosition<\/code> method. You can read more about this here<\/a>. Our options parameter is the options<\/code> object.<\/li>\n<\/ul>\ndisplayLocation<\/code> function, let’s handle the showError<\/code> function and options<\/code> object:<\/p>\n\/\/ Displays the different error messages\r\nshowError = (error) => {\r\n mapArea.style.display = \"block\"\r\n switch (error.code) {\r\n case error.PERMISSION_DENIED:\r\n mapArea.innerHTML = \"You denied the request for your location.\"\r\n break;\r\n case error.POSITION_UNAVAILABLE:\r\n mapArea.innerHTML = \"Your Location information is unavailable.\"\r\n break;\r\n case error.TIMEOUT:\r\n mapArea.innerHTML = \"Your request timed out. Please try again\"\r\n break;\r\n case error.UNKNOWN_ERROR:\r\n mapArea.innerHTML = \"An unknown error occurred please try again after some time.\"\r\n break;\r\n }\r\n}\r\n\/\/Makes sure location accuracy is high\r\nconst options = {\r\n enableHighAccuracy: true\r\n}<\/code><\/pre>\ndisplayLocation<\/code> function inside our main.js<\/code> file:<\/p>\ndisplayLocation = (position) => {\r\n const lat = position.coords.latitude;\r\n const lng = position.coords.longitude;\r\n}<\/code><\/pre>\ndisplayLocation<\/code>:<\/p>\nconsole.log( `Current Latitude is ${lat} and your longitude is ${lng}` );<\/code><\/pre>\nStep 3: Show the user\u2019s current location on a Google Map<\/h4>\n
displayLocation<\/code> function.<\/p>\nconst latlng = {lat, lng}\r\nshowMap(latlng);\r\ncreateMarker(latlng);\r\nmapArea.style.display = \"block\";<\/code><\/pre>\nlat<\/code> and lng<\/code> values and encapsulates it in the latlng<\/code> object literal. This makes it easy for us to use in our app.<\/p>\nshowMap<\/code> function which accepts a latlng<\/code> argument. In here, we get to instantiate our Google map and render it in our UI.<\/p>\ncreateMarker<\/code> function which also accepts our object literal (latlng<\/code>) as its argument and uses it to create a Google Maps Marker for us.<\/p>\nmapArea<\/code> visible so that our user can now see the location.<\/p>\ndisplayLocation = (position) => {\r\n const lat = position.coords.latitude;\r\n const lng = position.coords.longitude;\r\n const latlng = { lat, lng }\r\n showMap(latlng);\r\n createMarker(latlng);\r\n mapArea.style.display = \"block\";\r\n}<\/code><\/pre>\nshowMap<\/code> function.<\/p>\nshowMap = (latlng) => {\r\n let mapOptions = {\r\n center: latlng,\r\n zoom: 17\r\n };\r\n Gmap = new google.maps.Map(mapArea, mapOptions);\r\n}<\/code><\/pre>\nshowMap<\/code> function creates a mapOptions<\/code> objects that contain the map center (which is the lat<\/code> and lng<\/code> coordinates we got from displayLocation<\/code>) and the zoom level of the map. Finally, we create an instance of the Google Maps class and pass it on to our map. In fewer words, we instantiate the Google Maps class.<\/p>\ndiv<\/code> the map will be displayed and the mapOptions<\/code>. In our case, our div is called mapArea<\/code> and our mapOptions<\/code> is called mapOptions<\/code>. After this, our created map will show up, but without a marker. We need a marker so the user can identify their current position on the map.<\/p>\ncreateMarker<\/code> function:<\/p>\ncreateMarker = (latlng) => {\r\n let markerOptions = {\r\n position: latlng,\r\n map: Gmap,\r\n animation: google.maps.Animation.BOUNCE,\r\n clickable: true\r\n };\r\n Gmarker = new google.maps.Marker(markerOptions);\r\n}<\/code><\/pre>\n\n
position<\/code> property positions the marker at the specified latlng<\/code><\/li>\nmap<\/code> property specifies the map instance where the marker should be rendered (in our case, it\u2019s Gmap<\/code>)<\/li>\nanimation<\/code> property adds a little BOUNCE<\/code> to our marker<\/li>\nclickable<\/code> property set to true<\/code> means our marker can be clicked<\/li>\nGmarker<\/code> instance variable<\/li>\n<\/ol>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/map-form-2.png?ssl=1\")
<\/figure>\nStep 4: Pass the latitude and longitude to the Geocode API<\/h4>\n
https:\/\/maps.googleapis.com\/maps\/api\/geocode\/outputFormat?parameters<\/code><\/pre>\noutputFormat<\/code> may either be a json<\/code> or xml<\/code> which determines the the format used to deliver the data. The parameters<\/code> part is a list of parameters needed for the request. <\/p>\nhttps:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?latlng=${latlng}&key=${__KEY}<\/code><\/pre>\ngetGeolocation<\/code>.<\/p>\ngetGeolocation = (lat, lng) => {\r\n const latlng = lat + \",\" + lng;\r\n fetch( `https:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?latlng=${latlng}&key=${__KEY}` )\r\n .then(res => res.json())\r\n .then(data => console.log(data.results));\r\n}<\/code><\/pre>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/map-form-3.png?ssl=1\")
<\/figure>\n