diff --git a/static/css/style.css b/static/css/style.css
index 09b1c55..6a900b1 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -9,3 +9,31 @@ body,
margin: 0;
padding: 0;
}
+
+.controls {
+ margin-top: 16px;
+ 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);
+}
+
+#pac-input {
+ background-color: #fff;
+ padding: 0 11px 0 13px;
+ width: 400px;
+ font-family: Roboto;
+ font-size: 15px;
+ font-weight: 300;
+ text-overflow: ellipsis;
+}
+
+#pac-input:focus {
+ border-color: #4d90fe;
+ margin-left: -1px;
+ padding-left: 14px; /* Regular padding-left + 1. */
+ width: 401px;
+}
diff --git a/static/js/app.js b/static/js/app.js
index 328ea7c..78e9345 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -44,6 +44,22 @@ var These3Words = (function () {
google.maps.event.addListener(that.map, 'click', function (evt) {
that.moveTo(evt.latLng);
});
+
+ var searchInput = document.createElement('input');
+ searchInput.id = 'pac-input';
+ searchInput.classList.add('controls');
+ searchInput.setAttribute('type', 'text');
+ searchInput.setAttribute('placeholder', 'Search Box');
+ that.map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput);
+ var searchBox = new google.maps.places.SearchBox(searchInput);
+ google.maps.event.addListener(searchBox, 'places_changed', function() {
+ var places = searchBox.getPlaces();
+ if (places.length > 0) {
+ var place = places[0];
+ that.map.setCenter(place.geometry.location);
+ that.moveTo(place.geometry.location);
+ }
+ });
};
this.mapCanvas = document.body.appendChild(document.createElement('div'));
this.mapCanvas.id = 'map-canvas';
diff --git a/views/map.html b/views/map.html
index b014050..cdbcb2b 100644
--- a/views/map.html
+++ b/views/map.html
@@ -21,7 +21,7 @@
-
+