topic Re: Accessing geocoded results in hubl in CMS Development

Accessing geocoded results in hubl

JAbella — Thu, 30 May 2019 14:42:47 GMT

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!

Re: Accessing geocoded results in hubl

lscanlan — Fri, 31 May 2019 16:45:43 GMT

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

Re: Accessing geocoded results in hubl

JAbella — Fri, 31 May 2019 18:22:42 GMT

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?

Re: Accessing geocoded results in hubl

Jsum — Sat, 01 Jun 2019 06:56:43 GMT

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.

Re: Accessing geocoded results in hubl

lscanlan — Mon, 03 Jun 2019 16:06:40 GMT

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.

Re: Accessing geocoded results in hubl

JAbella — Thu, 11 Jul 2019 18:47:36 GMT

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.