Store Locator Built with HubDB question...

Anagam · ‎Feb 7, 2020

Hello everyone, I'm a WP designer transitioning to HS and really enjoying it. I'm creating a website that will use a Store Locator and found this article https://designers.hubspot.com/docs/tutorials/lets-build-a-page-with-a-map-with-hubdb that I've followed best I can and it's not working, shows me a blank page and no errors, I've confirmed my db connection and can produce this page http://federalsignal-6860826.hs-sites.com/store-locator but when I add the rest of the code from the article to get the map it doesnt work I get a "provider is having trouble loding this page".

<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="{{ page_meta.meta_description }}">
        <title>{{ page_meta.html_title }}</title>
        {% if site_settings.favicon_src %}<link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />{% endif %}
        {{ standard_header_includes }}
    </head>
    <body>
      {% set table_id = 2101898 %}
  
      {% if request.query_dict['row_id'] %}
   {% set row = hubdb_table_row(2101898, request.query_dict['row_id']) %}
   <h1>{{ row.company }}</h1>
   <h3>{{ row.store }}</h3>
      <p>{{ row.address }}, {{ row.state }}. {{ row.postal_code }} {{ row.contry }}</p>
   <p>{{ row.location['lat'] }}, {{ row.location['lon'] }}</p>

        {% elif request.query_dict['lat'] %}
      {% set params = "orderBy=geo_distance(location," ~ request.query_dict['lat'] ~ "," ~ request.query_dict['lon'] ~ ")" %}
      {% set params = "geo_distance(location," ~ request.query_dict['lat'] ~ "," ~ request.query_dict['lon'] ~ ",mi)__lt=1.0&" ~ params %}
 
      <table>
      {% for row in hubdb_table_rows(2101898, params) %}
        <tr>
            <td><a href="?{{ request.query }}&row_id={{ row.hs_id }}">{{ row.company }}</a></td>
            <td>{{ row.dealer }}</td>
        </tr>
      {% endfor %}
 </table>
      {% else %}
  Please allow us to read your location so we can show you the closest lunch spots.
  <script>
    navigator.geolocation.getCurrentPosition(function(position) {
      window.location = window.location.href.split('?')[0] + "?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude;
    });
  </script>
{% endif %}
      <style>
      #map {
      width: 100%;
      height: 1200px;
      }
     </style>
<div id="map" height="500"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 42.3665171, lng: -71.0820328}, zoom: 16
    });
 
  var marker_origin = new google.maps.Marker({
     map: map,
     title: "you are here",
     icon: { scaledSize: {width:50, height:50}, url: "http://maps.google.com/mapfiles/kml/paddle/blu-blank.png"},
     position: {lat: {{ request.query_dict['lat'] }}, lng: {{ request.query_dict['lon'] }}}
  });
 
{% for row in hubdb_table_rows(2101898) %}         
  var marker_{{ row.hs_id }} = new google.maps.Marker({
      map: map,
      position: {lat: {{ row.location["lat"] }}, lng: {{ row.location["lon"] }}},
      title: '{{ row.company }}',
      icon: { scaledSize: {width:40, height:40}, url: "http://maps.google.com/mapfiles/kml/shapes/dining.png"}
  });
 
  marker_{{ row.hs_id }}.addListener('click', function() {
    new google.maps.InfoWindow({
        content: '<div> {{ row.company }} is {{ row.location|geo_distance(request.query_dict['lat'], request.query_dict['lon'], "mi")|round(3) }} miles away</div>'
    }).open(map, marker_{{ row.hs_id }});
  });
{% endfor %}
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap" async defer></script>

      
        {{ standard_footer_includes }}
    </body>
</html>

The actual result I want to accomplish looks like this map by the footer https://www.envirosight.com/ but without the check-box filter, just a map of the world with pins that popup the details when clicked.

I'm looking for some direction as I can't understand the documentation or it's incomplete for what I'm trying to do.

HLamaire3 · ‎Okt 5, 2023

Hi there,

Perhaps one of our two powerful HubSpot Store Locator Modules on Google Maps 🌍📍  could be a solution.

📍 Store Locator on Google Maps 

Showcase all your store locations or services on Google Maps. 
Users can effortlessly search by country to pinpoint the nearest location(s).

One-time subscription fee, no recurring monthly payments. 
Optional integration with HubDB is available for an extra setup fee. 
Google maps API needed 
Available for purchase on the HubSpot Marketplace: Store Locator on Google Maps.  
https://ecosystem.hubspot.com/marketplace/modules/store-locator-on-google-maps-module-by-leadstreet

🌐 Store Locator on Google Maps with Radius search 

Organize your store locations or services on Google Maps by category. 
The innovative search feature with a radius helps users find nearby locations quickly. 
Refine their search by category to receive highly targeted results. 
One-time subscription fee, no recurring monthly payments.

Optional integration with HubDB is available for an extra setup fee. 
Google maps API needed 
Also available for purchase on the HubSpot Marketplace: Store Locator on Google Maps with Radius. 
https://ecosystem.hubspot.com/marketplace/modules/store-locator-google-maps-with-radius-module-by-le...

Both modules will enhance your website and make it easier than ever for your customers to find your store locations or services on Google Maps. 

Feel free to discover our new Store Locator Modules on Google Maps and reach out to our expert, Diego, for a personalized 15-minute demo. Click here to book your session. https://www.leadstreet.be/meetings/diegoreilleraguiar/book-a-15-min-hubspot-module-demo-with-diego-c...  
or contact our support team https://www.leadstreet.be/en/hubspot/support  

 Kind Regards,  

Hilde, Team leadstreet 

ProGrahamer · ‎Feb 10, 2020

Hello Anagam!
So, I see what you're trying to do, and I think there may be a much easier solution. You could build that map out in google.com/maps and embed it where ever you'd like. I have built this, and wanted to see if this is what you're aiming for:

https://woodard.com/groups/

If so, let me know and i will produce the "how-to" here in this thread.

CMS Development