facbook-img

Retailer Map HubSpot

App Development

The Retailer Map HubSpot App is a custom CRM solution developed for a client who needed a tool to visually showcase retailers on a map near a given address. The application allows users to search locations, fetch and visualize nearby businesses categorized by type, and generate sharable/exportable screenshots and PDFs integrated directly with HubSpot.

Book a Meeting

Vue.js

Python

HubSpot

Google API

Custom API

Overview

Our client needed a custom HubSpot application to visually map their retail network around any searched location. The goal was to allow users to enter an address, retrieve nearby retailers, and display each with branded logos directly on Google Maps. These maps would be used in sales, marketing, and reporting, requiring not just accuracy, but a polished and customizable visual experience.

To meet these needs, we built a Vue.js and Python-powered system that integrates deeply with Google Maps APIs and HubSpot. Users can drag-and-drop logos, adjust visual styles, and show or hide locations by category. A smart loading mechanism lets users load 20, 40, or up to 60 nearby places configurable via admin settings to avoid unnecessary Google Maps API billing.

Screenshots and PDFs of the generated maps are automatically created using a third-party screenshot API and saved directly to HubSpot custom objects. This ensures a seamless two-way sync between the HubSpot and the mapping tool, giving teams a streamlined way to manage location-based assets.

retail-map
retail-map
retail-map

Challenges

Unformatted Map Renders

Vue.js rendered map components weren’t loading in time for screenshot capture.

Failed Selenium Setup

Selenium server setup for automated screenshots repeatedly failed.

Inaccurate Logo Placement

Directional arrows and logo placement were inaccurate when logos were moved manually.

Unrestricted API Usage

Excessive Google Maps data loading led to high billing risk due to uncontrolled API requests.

Solutions

Reliable Screenshot Service

Integrated api.site-shot.com to generate full-page screenshots reliably, solving Vue rendering and Selenium issues.

Dynamic Logo Placement & Arrow Fix

Implemented dynamic logo placement with accurate arrow recalculations and distance tracking.

Individual Place Styling

Enabled custom styling for each place logo to enhance clarity and branding.

Batch-Controlled Data Loading

Introduced a configurable system to load places in steps (20, 40, 60 max) to limit API usage and manage costs.

Results

Visually Accurate Map Output

Generated compelling, branded map visuals with precise logo and direction indicators.

High-Quality Deliverables

Automated screenshot-to-PDF generation and linked files directly to HubSpot records.

API Cost Optimization

Controlled data loading preserved Google Maps API quota and prevented unexpected billing spikes.

HubSpot Integration Success

Bi-directional sync ensured address and file data stayed in sync between the HubSpot and the custom app.

retail-map

Key Achievements

Built a fully custom, map-based CRM with HubSpot integration
Enabled branded visual output with precise logo and direction overlays
Reduced Google Maps API costs through smart loading logic and limits
Automated screenshot to PDF generation linked directly to HubSpot records
Delivered a dynamic tool to support location-based sales and marketing strategies

Tools and Technologies Used

Frontend

Vue.js and Google Maps JavaScript API

Backend

Python (FastAPI or Flask)

External Screenshot Service

api.site-shot.com

APIs
Google Autocomplete API
Google Places API
Google Distance Matrix API
Google Geocoding API
CRM

HubSpot (Custom Object and File API)

Key Features

Address Search & Validation

  • Uses Google Autocomplete for location input.

  • Validates addresses using the Geocoding API.

  • Creates/links address to a custom object in HubSpot and the local database.

Nearby Place Search & Control

  • Retrieve places by selected categories (Restaurants, Pharmacies, etc.).

  • Toggle visibility of:

    • Entire categories

    • Individual places

  • Move and style business logos freely on the map canvas.

  • Distance and direction arrows auto-calculated using the Distance API.

Map Screenshot & PDF Export

  • Dynamic map rendered in Vue.js with overlays.

  • Issues with native component rendering led to use of api.site-shot.com for consistent and clean screenshots.

  • Export screenshots as PDF, including nearby business details.

  • Assets are automatically uploaded and saved into HubSpot.

HubSpot Sync (Two-Way)

  • Create/update addresses and map metadata as custom objects in HubSpot.

  • Sync business data from HubSpot into the app.

  • All screenshots and PDFs are attached to their respective records.

Ready to elevate your HubSpot with dynamic location-based features?

Let’s build something powerful together get in touch with our experts today.

Contact us Now