diff --git a/web/components/Main.js b/web/components/Main.js index 064beb5..33bebe5 100644 --- a/web/components/Main.js +++ b/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 diff --git a/web/dist/index.html b/web/dist/index.html index fb9a240..251c1c5 100644 --- a/web/dist/index.html +++ b/web/dist/index.html @@ -14,6 +14,10 @@ + diff --git a/web/helpers/googleMaps.js b/web/helpers/googleMaps.js new file mode 100644 index 0000000..8add6f5 --- /dev/null +++ b/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; +}