Introducing Map Mate
Map Mate consists of the Marker Mate element which works alongside a Google Map to enable the display of pretty much anything inside a marker’s popup window - including lists, links, and images!
No actions or workflows are required. Using Bubble’s dynamic expression builder, just add your desired content to the Marker caption property of the Google Map element. Then add corresponding styles to Marker Mate.
Marker Mate is ultra-lightweight yet super flexible and powerful, giving you full control over the content of Google Map info popups.
How to Use
In a bit of a departure from our “no code” ethos, this plug-in is categorized as “technical”, requiring some familiarity with basic HTML and CSS. If you are uncomfortable “getting your hands dirty” with these web technologies, you should seek another solution.
Step 1 - Setup
- First, be sure to enable the element ID option in your app’s settings (Settings --> General). Then, add an ID to the Google Map element (at the bottom of the map’s property editor). Finally, enter that same ID into the Map ID field of Marker Mate. Marker Mate is now associated with the Google Map.
Step 2 - Add Content
- Using Bubble’s dynamic expression builder, simply add your desired HTML to the Marker caption property of the Google Map element, incorporating marker-specific data using Bubble’s dynamic expression builder.
Step 3 - Style the Content
- Add the desired CSS to the “Marker Popup Styles” field of Marker Mate.
If you’re working with the plug-in and need assistance integrating it into your web app, please post to the plug-in help forum. (Make sure “Map Mate” appears somewhere in the subject line.)
If you need help deciding if this is the right solution for you, feel free to post questions or comments to this thread.