diff --git a/app.py b/app.py
index cab4b75..d6b360a 100755
--- a/app.py
+++ b/app.py
@@ -31,6 +31,16 @@ def showMap(threewords):
                         err="Could not find location {}".format(threewords))
 
 
+@get('/latlng/<lat:float>,<lng:float>')
+def showMapFromLatLng(lat, lng):
+    try:
+        threewords = these.three_words((lat, lng))
+        return template('map', lat=lat, lng=lng, threewords=threewords)
+    except:
+        return template('index',
+                        err="Could not find location {}".format(threewords))
+
+
 # API
 @get('/api/<lat:float>,<lng:float>')
 def latLngToHash(lat, lng):
diff --git a/static/js/app.js b/static/js/app.js
index ce17a06..a0f64fc 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -134,6 +134,8 @@ var These3Words = (function () {
   
   
   return {
-    Map: Map
+    Map: Map,
+    apiGet: apiGet,
+    apiGetFromLatLng: apiGetFromLatLng
   };
 }());
diff --git a/views/index.html b/views/index.html
index 931c71a..4b96b8a 100644
--- a/views/index.html
+++ b/views/index.html
@@ -8,6 +8,8 @@
   <!-- Style -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="/static/css/style.css">
+  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
+  <script src="/static/js/app.js"></script>
 </head>
 <body>
   <div class="container">
@@ -30,23 +32,38 @@
     <footer>
       <p class="text-center text-muted">Made with ♥ by <a href="https://betatim.github.io/">Tim</a> and <a href="https://dun.gs">Kevin</a>. <a href="https://github.com/betatim/these-3-words">Fork it on GitHub</a>.
     </footer>
-    <script>
-      (function() {
-        var default3words = 'spitting-ripple-fontanel';
-        var threewordsField = document.getElementById('input3words');
-        document.getElementById('button3words').addEventListener('click', function(evt) {
-          var threewords = threewordsField.value;
-          if (threewords.length === 0) {
-            threewords = default3words;
-          }
-          if (/\w+-\w+-\w+/.test(threewords)) {
-            window.location = '/' + threewords;
-          } else {
-            document.getElementById('input3wordsContainer').classList.add('has-error');
-          }
-        });
-      })();
-    </script>
 </div>
+<script>
+(function () {
+    var initialise = function () {
+      // Create the autocomplete object, restricting the search
+      // to geographical location types.
+      var searchbox = new google.maps.places.SearchBox(
+           (document.getElementById('input3words')));
+      // When the user selects an address from the dropdown,
+      // populate the address fields in the form.
+      google.maps.event.addListener(searchbox, 'places_changed', function() {
+        // Get the place details from the autocomplete object.
+        var places = searchbox.getPlaces();
+        console.log("HEllo");
+        if (places.length > 0) {
+          place = places[0];
+          These3Words.apiGetFromLatLng(place.geometry.location,
+                                       function(status, data) {
+              if (status >= 200 && status < 400) {
+                window.location = "/" + data.three;
+              }
+          });
+        } else {
+          var words = document.getElementById('input3words').value;
+          if (/\w+-\w+-\w+/.test(words)) {
+            window.location = '/' + words;
+          }
+	}
+      });
+    };
+    window.addEventListener('load', initialise);
+}());
+</script>
 </body>
 </html>
