Make search work

web/components/Main.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Filters from './Filters';
 import Listings from './Listings';
+import { pacSelectFirst } from '../helpers/googleMaps';
 
 class Main extends React.Component {
   constructor(props) {
@@ -28,13 +29,29 @@ class Main extends React.Component {
     control.style = "top: 200px;"
 
     var input = document.getElementById('gmaps-places-input');
+
+    pacSelectFirst(input);
     var options = {
       componentRestrictions: {country: "BA"}
     };
     var searchBox = new google.maps.places.Autocomplete(input, options);
-    searchBox.addListener('places_changed', function() {
-      console.log('search changed', searchBox.getPlaces());
+
+    searchBox.addListener('place_changed', function() {
+      var place = searchBox.getPlace();
+
+      if (!place.geometry) {
+        return;
+      }
+
+      if (place.geometry.viewport) {
+        map.fitBounds(place.geometry.viewport);
+
+      } else {
+        map.setCenter(place.geometry.location);
+        map.setZoom(18);
+      }
     });
+
     control.addEventListener('click', (e) => {
       this.setState({
         mapClicked: true

web/dist/index.html

@@ -14,6 +14,10 @@
     </div>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBghY4-1wa7jETxDbyDdcGL731ZtOxpkA&libraries=places">
     </script>
+    <script
+  src="https://code.jquery.com/jquery-3.1.1.min.js"
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+  crossorigin="anonymous"></script>
     <script type="text/javascript" src="app.bundle.js"></script>
     </div>
   </body>

web/helpers/googleMaps.js

@@ -0,0 +1,29 @@
+export const pacSelectFirst = (input) => {
+  // store the original event binding function
+  var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
+
+  function addEventListenerWrapper(type, listener) {
+    // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
+    // and then trigger the original listener.
+    if (type == "keydown") {
+      var orig_listener = listener;
+      listener = function(event) {
+        var suggestion_selected = $(".pac-item-selected").length > 0;
+        if (event.which == 13 && !suggestion_selected) {
+          var simulated_downarrow = $.Event("keydown", {
+            keyCode: 40,
+            which: 40
+          });
+          orig_listener.apply(input, [simulated_downarrow]);
+        }
+
+        orig_listener.apply(input, [event]);
+      };
+    }
+
+    _addEventListener.apply(input, [type, listener]);
+  }
+
+  input.addEventListener = addEventListenerWrapper;
+  input.attachEvent = addEventListenerWrapper;
+}