Accessing geocoded results in hubl

[JAbella]

We are adding a search by address for users to filter facilities near them (right now we just have the basic zip search).

I'm still getting familiar with hubl and the google maps API and need to capture the geocode results as a param. This does not work because the scope of the results doesn't extend to the hubl. How can I get the returned info in there?

resultsMap.setCenter(results[0].geometry.location);
                  {% set lat_param = lat_param ~ "&latitude=" + results[0].geometry.location.lat|urlencode %}
                  {% set lon_param = lon_param ~ "&longitude=" + results[0].geometry.location.lat|urlencode %}

Any help or direction would be greatly appreciated! 

[Jsum · Accepted solution]

Hi @JAbella ,

You are providing a search a search for your users to find nearby locations?

You can do this with:

1. google autocomplete api   https://developers.google.com/maps/documentation/javascript/places-autocomplete

2. grab the lat/lon values from the autocomplete function you create.

3. on submit, use a javascript redirect back to the page, but with the latitude and longitude in the the url as query params.

4. Use HubL request variables to retrieve the params from the url

url : www.url.com?latitude=12344.322

hubl: {{ request.query_dict.latitude }}

5. use the hubl tokens for the the latitude and longitude to filter the results.

[lscanlan]

Hi @JAbella,

I can help, but I think I need to understand your code a little better. How are you currently getting the lat and long? You said that the scope of the results doesn't extend to HubL. Where are the results currently? Is it coming just from the query string?

Thanks,
Leland

[JAbella]

Hiya Leland -- thank you for helping!! 

I'm using the google maps geocoding api (and the boilerplate code from here) and the results come back as this object 

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

It's the first time I've worked with the geocoding api, so I set it up on this test page to recenter the map and it has it's own submit button.

As the interim step, I've been trying to capture the values when the results object is returned. But all I get is ?lat=&lon=  .  Here's the code:

<script> 
          var geocoder;
          var map;
          
          function initMap() {            
            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 10,
              center: {lat: 42.3853, lng: -71.8368}
            });
            
            {% for row in hubdb_table_rows(table_id, filter_params) %}           
              var marker_{{ row.hs_id }} = new google.maps.Marker({          
                  map: map,
                  position: {lat: {{ row.location.lat }}, lng: {{ row.location.lon }} }, 
                  icon: { scaledSize: {width: 20, height:20}, url: "https://cdn2.hubspot.net/hubfs/4764394/01012019_ARC_icon_svgs/ARC_map_150px_150px_navy_02.png" },
                  title: "{{ row.organization }}",
              });

              marker_{{ row.hs_id }}.addListener('click', function() {
                new google.maps.InfoWindow({
                    content: "<div> {{ row.organization }} </div>"
                }).open(map, marker_{{ row.hs_id }});
              });
            {% endfor %}
            
            geocoder = new google.maps.Geocoder();
            
            document.getElementById('address-submit').addEventListener('click', function() {
              codeAddress(geocoder, map);
            });

           
            function codeAddress(geocoder, resultsMap) {
              var address = document.getElementById('address').value;
              geocoder.geocode( {'address' : address}, function(results, status) {
                if (status ==  'OK') {
                  resultsMap.setCenter(results[0].geometry.location);
                  {% set lat_param = lat_param ~ "&latitude=" + results[0].geometry.location.lat|urlencode %}
                  {% set lon_param = lon_param ~ "&longitude=" + results[0].geometry.location.lat|urlencode %}

                  var marker_origin = new google.maps.Marker({
                    map: resultsMap,
                    title: "You are here.",
                    icon: { scaledSize: {width:25, height:25}, url: "https://cdn2.hubspot.net/hubfs/4764394/01012019_ARC_icon_svgs/ARC_map_150px_150px_green_02.png"},
                    position: results[0].geometry.location,
                    zoom: 14,
                  });
                  
                } else {
                  alert('Geocode was not successful for the following reason: ' + status)
                }
              });
            }
          }
        </script>

I figured once I was able to do that, then I could rewrite to the full feature which should use one submit button, so people could filter on the additional options too, and then the return would recenter the map on their address and sort the facility cards by closest first. 

Does this help you help me? What else can I provide? Should I add you to the project so you can look at my (super-messy, unrefactored) module?

[Jsum · Accepted solution]

Hi @JAbella ,

You are providing a search a search for your users to find nearby locations?

You can do this with:

1. google autocomplete api   https://developers.google.com/maps/documentation/javascript/places-autocomplete

2. grab the lat/lon values from the autocomplete function you create.

3. on submit, use a javascript redirect back to the page, but with the latitude and longitude in the the url as query params.

4. Use HubL request variables to retrieve the params from the url

url : www.url.com?latitude=12344.322

hubl: {{ request.query_dict.latitude }}

5. use the hubl tokens for the the latitude and longitude to filter the results.

[JAbella]

Thank you, @Jsum! Really appreciate your tips and the steps. 🙂

After playing with the Autocomplete api, I figured out how to make the geocoding api work, and create the params.

[lscanlan · Accepted solution]

Thanks again, Jsum. @JAbella: just wanted to link you to some relevant HubL documentation. We have some documentation on the HTTP request variables here: https://designers.hubspot.com/docs/hubl/hubl-supported-variables#http-request-variables. So like Jsum suggested, you can pull the query string parameters from a dict created at {{ request.query_dict }} . I'd also suggest reading our article about using the Developer Info tab: https://designers.hubspot.com/docs/hubl/how-to-use-developer-info-on-cos-pages. It can help in terms of finding HubL variables that you can use. I hope that helps.