CMS Development

JAbella
Contributor

Accessing geocoded results in hubl

SOLVE

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! 

0 Upvotes
2 Accepted solutions
Jsum
Solution
Key Advisor

Accessing geocoded results in hubl

SOLVE

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.

View solution in original post

lscanlan
Solution
HubSpot Alumni
HubSpot Alumni

Accessing geocoded results in hubl

SOLVE

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.

Leland Scanlan

HubSpot Developer Support

View solution in original post

0 Upvotes
5 Replies 5
lscanlan
HubSpot Alumni
HubSpot Alumni

Accessing geocoded results in hubl

SOLVE

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

Leland Scanlan

HubSpot Developer Support
0 Upvotes
JAbella
Contributor

Accessing geocoded results in hubl

SOLVE

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?

0 Upvotes
Jsum
Solution
Key Advisor

Accessing geocoded results in hubl

SOLVE

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
Contributor

Accessing geocoded results in hubl

SOLVE

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.

0 Upvotes
lscanlan
Solution
HubSpot Alumni
HubSpot Alumni

Accessing geocoded results in hubl

SOLVE

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.

Leland Scanlan

HubSpot Developer Support
0 Upvotes