CMS Development


Store Locator Built with HubDB question...

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 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 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 }}>
        <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 }}
      {% set table_id = 2101898 %}
      {% if request.query_dict['row_id'] %}
   {% set row = hubdb_table_row(2101898, request.query_dict['row_id']) %}
   <h1>{{ }}</h1>
   <h3>{{ }}</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 %}
      {% for row in hubdb_table_rows(2101898, params) %}
            <td><a href="?{{ request.query }}&row_id={{ row.hs_id }}">{{ }}</a></td>
            <td>{{ }}</td>
      {% endfor %}
      {% else %}
  Please allow us to read your location so we can show you the closest lunch spots.
    navigator.geolocation.getCurrentPosition(function(position) {
      window.location = window.location.href.split('?')[0] + "?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude;
{% endif %}
      #map {
      width: 100%;
      height: 1200px;
<div id="map" height="500"></div>
  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: ""},
     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: '{{ }}',
      icon: { scaledSize: {width:40, height:40}, url: ""}
  marker_{{ row.hs_id }}.addListener('click', function() {
    new google.maps.InfoWindow({
        content: '<div> {{ }} 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 src="" async defer></script>

        {{ standard_footer_includes }}


The actual result I want to accomplish looks like this map by the footer 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. 

2 Replies 2

Store Locator Built with HubDB question...

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).  


🌐 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.  


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. 
or contact our support team   


Kind Regards,  

Hilde, Team leadstreet 


Store Locator Built with HubDB question...

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 and embed it where ever you'd like. I have built this, and wanted to see if this is what you're aiming for:

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