[UPDATE v1.1.0] 📍 Marker Mate: Custom Map Marker Popup Content! (by Tech-Tonic)

[sudsy]

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.

Screenshots

Demo

• Map Mate / Marker Mate Demo

How to Use

Please Note

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.

Support

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

Marketplace

• Map Mate

Additional info, tips, and tricks coming…

[sudsy]

Thanks, @seanhoots.

Yes, there’s a bit more to the plug-in than you suggest.

As for styling, you could write targeted CSS using the page header field, but that option isn’t available on the hobby plan, and I wanted to make the plug-in accessible to free plan users (without targeting).

An HTML element would probably work for styling, although I’m not sure about compatibility across all browsers, and it’s a bit too ”hacky” for my taste.

Plus, I have ideas for additional elements and functionality to come, which is why I made Marker Mate one element of the Map Mate plug-in.

[sudsy]

Note on Compatibility

Just a quick note to say this plug-in should work anywhere Google Map works. It has been tested in Chrome, Firefox, Opera, Microsoft Edge, and even IE11.

[eli]

Two thumbs up, @sudsy! This is a handy plugin

[sudsy]

Thanks much, @eli. I appreciate it!

The plug-in idea originated from a forum request, and since I anticipated a similar need for one of my own projects, I decided to pursue it.

[sudsy]

Version 1.1.0 - Declutter Your Maps!

This release of Marker Mate brings the ability to hide and/or emulate map controls.
 
 

Marker Mate is a Google Map companion plug-in. It works in conjunction with Bubble’s Google Map plug-in to extend its functionality. With these new feature additions, Marker Mate now…

• Enables custom marker popups which can include images, lists, links, and more.

• [NEW in 1.1.0] Allows map controls to be hidden for an unobstructed view of the underlying markers and map features.

• [NEW in 1.1.0] Provides a set of actions for emulating map controls, thereby enabling a custom UI for controlling your map via workflows.

Be sure to check out the updated demo (with edit mode access) to see it in action!

          Marker Mate Demo

          Marker Mate in the Marketplace

 

[conductorcolombia]

I buy thanks

[another]

Great plugin, although have just seen about it, here on forum, and provided links.

Before and if buying the plugin, is there any plugin usage to be seen, with an example of more then 500 data (location) entries?

The more location data entries, the better. Thanks!

[sudsy]

@another

is there any plugin usage to be seen, with an example of more then 500 data (location) entries?

I’m not aware of any such examples. That said, I don’t think your question relates to the plugin specifically. Rather, it’s more related to the performance of Bubble’s Google Map element, and I would expect performance to degrade with a large number of markers. That’s just the nature of Google Maps (and online maps in general), and it’s the reason for features such as “clustering”.

The practical limitation for number of markers in Bubble’s native map element probably depends on a variety of factors, including the number of markers displayed at once, how much data is being retrieved per marker, and how well-optimized your Bubble database schema and queries are.

The good news is that you don’t need any plugin to experiment. However, it’s generally a better idea to zoom in and display fewer markers than to display hundreds of markers at a time, as the latter approach adversely impacts page load time as well as browser resources (memory, CPU, etc.), which could result in a poor UX - especially on mobile.

Good luck,

-Steve

EDIT

BTW, Bubble’s native map element isn’t the only game in town. There are alternative Google Map plugins as well as plugins for alternative map services (such as Mapbox). There’s also a free map plugin. Just search the forum and/or plugin marketplace for other possibilities.

[another]

Thanks for sharing!

Have done some research, 1 hour or so, across bubble forum and internet.

This here example is the most simpler and in the same time promising:

Bubble Intermediates: Map element display things within X km

Would love to hear from others, real experiences, not promotion.

[stuart4]

Anyway you could add Google Maps clustering to this plugin ?

Marker Clustering  |  Maps JavaScript API  |  Google...

I am looking for a plugin like yours that has both custom marker popups and clustering
cherers!