A user is migrating from WordPress to Shopify and needs to replicate Google Maps functionality previously handled by the Elfsight plugin. The requirements include:
Core Features Needed:
Adding ~30 custom markers with different icons/labels
Search functionality to find the nearest location based on user input
Distance calculation between user location and marked stores
Technical Guidance Provided:
One responder clarified that Shopify differs from WordPress—it doesn’t support arbitrary backend code without creating a standalone app. For frontend-only solutions:
Use Google Maps JavaScript API directly (linked to official documentation for advanced markers)
Store location data either hardcoded in JavaScript or via Shopify metafields/metaobjects
Implement search and distance calculation as advanced theme customization
Another responder suggested using a pre-built app (IzyMaps) to avoid custom coding complexity. The app offers multi-location support, auto-locate nearest store, search by city/address, and customizable styling—eliminating the need to maintain custom JavaScript.
Status: The discussion remains open with two approaches offered: custom development using Google Maps API or using a purpose-built Shopify app. No final decision indicated.
Summarized with AI on October 24.
AI used: claude-sonnet-4-5-20250929.
I am currently transitioning from WordPress to Shopify and need assistance with replicating a Google Maps functionality that I previously implemented using the Elfsight Google Maps Plugin.
In my WordPress setup, I added nearly 30 locations on the map, with each location marked by a custom marker. Users were able to search for the closest location to their input address, and the system would display the nearest marker.
I already have my Google Maps API key set up and would like to implement a similar feature in Shopify. Specifically, I need help with:
Adding Markers: Using JavaScript to specify and add nearly 30 locations on the map. Each marker should be customizable with different icons or labels to represent different locations.
Search Functionality: Implementing additional JavaScript functionality that calculates the distance between the user’s location and the marked locations, allowing users to search for and be shown the closest location to them.
Could you please provide the necessary JavaScript code or guidance on how to achieve this in Shopify? Any help or resources would be greatly appreciated.
Hi @akilh , For frontend libraries that don’t need a backend then shopify is probably an irrelevant factor, just find out how to do X for any website then work out integrate that into the shopify theme.
Shopify does not act like a server like wordpress so you can’t run arbitrary code/extensions on the backend without creating a stand alone app or using an app from the app store.
This means any functionality for a third party service has to be built into the embed of javascript that interacts with the embed.
Otherwise for libraries that require a backend you have to create an app to handle the backend and shopify integration.
For markers you would either hardcode the locations in the javascript or use something like a shop metafield/metaobject to store and render that data for use in the javascript.
A search functionality along with map overlays/drawing is another level of advanced theme customization beyond the scope of the forums.
You need to get a base implementation by working with the third party system and their support , then and ask specific questions about integrating with shopify, i.e. show your work.
If you need this customization implemented and have a budget for it then contact me by my email for services. Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
What you’re describing (multiple markers, nearest-store search, custom icons, etc.) is possible with Google Maps JS directly, but it usually means quite a bit of custom coding and maintenance (handling API updates, performance issues with many markers, etc.).
If you’d prefer not to reinvent the wheel inside your Shopify theme, one option is to use a purpose-built app. For example, I developed IzyMaps, which does exactly this:
Add multiple store locations (via name or address)
Auto-locate and display the closest one to the customer
Let customers search by city, name, or address
Customize map styles, colors, and layout to match your theme
No need to maintain your own JS or backend integration
That way you can keep your existing Google Maps API setup but avoid having to hardcode everything yourself.
If you’d rather code it yourself, Paul’s link to the Google Maps JS docs is the right starting point. But if you just want it working with minimal fuss inside Shopify, IzyMaps could save you quite a bit of time.
, For frontend libraries that don’t need a backend then shopify is probably an irrelevant factor, just find out how to do X for any website then work out integrate that into the shopify theme.