Implement Google Places Autocomplete.

keokilee · Jan 14, 2016 · 334b995 · 334b995
1 parent 04fd79e
commit 334b995
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 61 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist/
 *.log
+secrets.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "homepage": "https://github.com/keokilee/hi5-redemption#readme",
   "dependencies": {
+    "google-maps": "^3.1.0",
     "vue": "^1.0.13",
     "vuex": "^0.2.0"
   },
@@ -49,6 +50,7 @@
     "phantomjs": "^1.9.19",
     "postcss-browser-reporter": "^0.4.0",
     "postcss-cssnext": "^2.4.0",
+    "postcss-font-magician": "^1.4.0",
     "postcss-reporter": "^1.3.0",
     "postcss-url": "^5.0.2",
     "rimraf": "^2.5.0",

diff --git a/public/index.html b/public/index.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="utf-8">
     <title>HI5 Redemption Centers</title>
-    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
   <body>
     <script src='/assets/app.js'></script>

diff --git a/secrets.json.example b/secrets.json.example
@@ -0,0 +1,5 @@
+{
+  "development": {
+    "GOOGLE_MAPS_API_KEY": ""
+  }
+}
diff --git a/src/components/Filters.vue b/src/components/Filters.vue
@@ -20,22 +20,19 @@
     </p>
     <p>
       near
-      <span class='search'>
-        <input type='text' v-model='place' />
-        <span class='bar'></span>
-      </span>
+      <search></search>
     </p>
   </div>
 </template>
 
 <script>
+import Search from 'src/components/Search'
 import store from 'src/store'
 import { ALL_LOCATIONS, OPEN_LOCATIONS, CLOSED_LOCATIONS } from 'src/constants'
 
 export default {
   data () {
     return {
-      place: 'Current Location',
       distanceValue: ALL_LOCATIONS,
       openValue: ALL_LOCATIONS,
       constants: { ALL_LOCATIONS, OPEN_LOCATIONS, CLOSED_LOCATIONS }
@@ -53,7 +50,8 @@ export default {
 
       store.dispatch('SET_DISTANCE', value)
     }
-  }
+  },
+  components: { Search }
 }
 </script>
 
@@ -80,56 +78,4 @@ export default {
   font-size: inherit;
   border-radius: 0;
 }
-
-.search {
-  position: relative;
-  margin: 25px 10px 25px;
-}
-
-.search input {
-  font-size: 16px;
-  padding-bottom: 5px;
-  display: inline-block;
-  width: calc(100% - 60px);
-  border: none;
-  border-bottom: 1px solid #757575;
-}
-
-.search input:focus {
-  outline: none;
-}
-
-.search input:focus ~ label {
-  top: -20px;
-  font-size: 0.9rem;
-  color: #2979FF;
-}
-
-.search input:focus ~ .bar:before, .search input:focus ~ .bar:after {
-  width: 50%;
-}
-
-.bar {
-  position: relative;
-  display: block;
-  width: calc(100% - 60px);
-}
-
-.bar:before, .bar:after {
-  content: '';
-  height: 2px;
-  width: 0;
-  bottom: 4px;
-  position: absolute;
-  background: #2979FF;
-  transition: 0.2s ease all;
-}
-
-.bar:before {
-  left: calc(50% + 46px);
-}
-
-.bar:after {
-  right: calc(50% - 46px);
-}
 </style>
diff --git a/src/components/Search.vue b/src/components/Search.vue
@@ -0,0 +1,88 @@
+<template>
+  <span class='search'>
+    <input id='placeAutocomplete' type='text' v-model='place' />
+    <span class='bar'></span>
+  </span>
+</template>
+
+<script>
+import MapsLoader from 'src/services/google_maps'
+
+MapsLoader.load(google => {
+  const bounds = new google.maps.LatLngBounds(
+    new google.maps.LatLng(20.3111981, -158.8405013),
+    new google.maps.LatLng(22.2711981, -156.8005013)
+  )
+
+  const autocomplete = new google.maps.places.Autocomplete(
+    document.getElementById('placeAutocomplete'),
+    { bounds, radius: 200, componentRestrictions: { country: 'us' } }
+  )
+
+  google.maps.event.addListener(autocomplete, 'place_changed', () => {
+    console.log(autocomplete.getPlace())
+  })
+})
+
+export default {
+  data () {
+    return {
+      place: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search {
+  position: relative;
+  margin: 25px 10px 25px;
+}
+
+.search input {
+  font-size: 16px;
+  padding-bottom: 5px;
+  display: inline-block;
+  width: calc(100% - 60px);
+  border: none;
+  border-bottom: 1px solid #757575;
+}
+
+.search input:focus {
+  outline: none;
+}
+
+.search input:focus ~ label {
+  top: -20px;
+  font-size: 0.9rem;
+  color: #2979FF;
+}
+
+.search input:focus ~ .bar:before, .search input:focus ~ .bar:after {
+  width: 50%;
+}
+
+.bar {
+  position: relative;
+  display: block;
+  width: calc(100% - 60px);
+}
+
+.bar:before, .bar:after {
+  content: '';
+  height: 2px;
+  width: 0;
+  bottom: 4px;
+  position: absolute;
+  background: #2979FF;
+  transition: 0.2s ease all;
+}
+
+.bar:before {
+  left: calc(50% + 46px);
+}
+
+.bar:after {
+  right: calc(50% - 46px);
+}
+</style>
diff --git a/src/services/google_maps.js b/src/services/google_maps.js
@@ -0,0 +1,7 @@
+/* global __MAPS_KEY__:false */
+import MapsLoader from 'google-maps'
+
+MapsLoader.KEY = __MAPS_KEY__
+MapsLoader.LIBRARIES = ['places']
+
+export default MapsLoader
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,5 @@
 const webpack = require('webpack')
+const secrets = require('./secrets.json')
 
 module.exports = {
   devServer: {
@@ -38,7 +39,8 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      __DEBUG__: true
+      __DEBUG__: true,
+      __MAPS_KEY__: JSON.stringify(secrets.development.GOOGLE_MAPS_API_KEY)
     })
   ],
   output: {
@@ -56,6 +58,7 @@ module.exports = {
     loaders: {
       js: 'babel!eslint',
       postcss: [
+        require('postcss-font-magician')(),
         require('postcss-url')(),
         require('postcss-cssnext')(),
         require('postcss-browser-reporter')(),