Store Locator Built with HubDB question...

Highlighted
New Contributor

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. 

1 Reply 1
Highlighted
Regular Contributor

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.

Reply
0 Upvotes