From 74e09384651a5b6cbb33879ce0c25f5db84b96c9 Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Tue, 15 Oct 2019 06:18:59 +0000
Subject: [PATCH] Add autocomplete for maps in outlet, hub, and partner. #270

---
 templates/hub/form.html.twig     | 24 +++++++++++++++++++++++-
 templates/outlet/form.html.twig  | 24 +++++++++++++++++++++++-
 templates/partner/form.html.twig | 24 +++++++++++++++++++++++-
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/templates/hub/form.html.twig b/templates/hub/form.html.twig
index 9cce5845..df8a7190 100644
--- a/templates/hub/form.html.twig
+++ b/templates/hub/form.html.twig
@@ -164,12 +164,34 @@
 
 
 {% block scripts %}
-<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
 <script>
 
 // BEGIN google maps stuff
+// location search autocomplete
+var input = document.getElementById('m_gmap_address');
+
+var autocomplete = new google.maps.places.Autocomplete(input);
+autocomplete.setComponentRestrictions({'country': ['{% trans %}default_region{% endtrans %}']});
+autocomplete.addListener('place_changed', function() {
+    var place = autocomplete.getPlace();
+
+    if (!place.geometry) {
+        return;
+    }
+
+    var message = {
+        'action': 'map.search',
+        'params': {
+            'lat': place.geometry.location.lat(),
+            'lng': place.geometry.location.lng()
+        }
+    };
+    console.log(message);
+});
+
 function selectPoint(map, latlng) {
     var lat = latlng.lat();
     var lng = latlng.lng();
diff --git a/templates/outlet/form.html.twig b/templates/outlet/form.html.twig
index d6eb49e0..89f94857 100644
--- a/templates/outlet/form.html.twig
+++ b/templates/outlet/form.html.twig
@@ -143,12 +143,34 @@
 
 
 {% block scripts %}
-<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
 <script>
 
 // BEGIN google maps stuff
+// location search autocomplete
+var input = document.getElementById('m_gmap_address');
+
+var autocomplete = new google.maps.places.Autocomplete(input);
+autocomplete.setComponentRestrictions({'country': ['{% trans %}default_region{% endtrans %}']});
+autocomplete.addListener('place_changed', function() {
+    var place = autocomplete.getPlace();
+
+    if (!place.geometry) {
+        return;
+    }
+
+    var message = {
+        'action': 'map.search',
+        'params': {
+            'lat': place.geometry.location.lat(),
+            'lng': place.geometry.location.lng()
+        }
+    };
+    console.log(message);
+});
+
 function selectPoint(map, latlng) {
     var lat = latlng.lat();
     var lng = latlng.lng();
diff --git a/templates/partner/form.html.twig b/templates/partner/form.html.twig
index 66026e2e..df92e1d5 100644
--- a/templates/partner/form.html.twig
+++ b/templates/partner/form.html.twig
@@ -174,12 +174,34 @@
 
 
 {% block scripts %}
-<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
 <script>
 
 // BEGIN google maps stuff
+// location search autocomplete
+var input = document.getElementById('m_gmap_address');
+
+var autocomplete = new google.maps.places.Autocomplete(input);
+autocomplete.setComponentRestrictions({'country': ['{% trans %}default_region{% endtrans %}']});
+autocomplete.addListener('place_changed', function() {
+    var place = autocomplete.getPlace();
+
+    if (!place.geometry) {
+        return;
+    }
+
+    var message = {
+        'action': 'map.search',
+        'params': {
+            'lat': place.geometry.location.lat(),
+            'lng': place.geometry.location.lng()
+        }
+    };
+    console.log(message);
+});
+
 function selectPoint(map, latlng) {
     var lat = latlng.lat();
     var lng = latlng.lng();