Streaming live at 10am (PST)

Multiple markers on map with info on hover


#1

Hi, I am trying to create a map with multiple markers. Hovering over each marker should bring up info, including a link.

Initially, I tried Google My Maps but this doesn’t seem to allow you to hover (info slides in from left). I am now using an image of a map, adding divs as the markers with tooltips.

However, I have two issues to resolve. The first is how to style the tooltips? I followed the instructions from http://tooltipster-for-webflow.webflow.io/ which works but their example has an arrow on the tooltip along with a black background. I guess this is done through custom attributes but can’t find a tutorial for this?

The second issue is how to place the marker divs so that they remain in the correct position on the map. The way I have it at the moment, the map moves with the browser but the marker div doesn’t.

This is the page http://echo-geo.webflow.io/projects and my shared link is https://preview.webflow.com/preview/echo-geo?preview=7a9097516c0a6f5b1a5b8ca1e711544e

Any help would be very much appreciated.

Thanks


#2

It's not going to be the answer you're looking for but you should use the real maps API to craft a real google map with all your data, and then embed it in Webflow using custom code.

You can try with a WF google map and overlay data but you're going to end up fighting a lot of hassles. When it comes to augmented maps, the API is the way, and you may need the help of a developer.


#3

Thanks Vincent. I think using Google maps API may provide additional functionality I don’t really need for this particular section. I also prefer the map image used for branding.

I have altered it so the markers stay in the correct position http://echo-geo.webflow.io/projects. If possible, I would really like to know how to style tooltips and add a link within them?

Thanks very much.


#4

For this one, and even if you've done it already, I usually go with the map in a Container element so it's not fully elastic, then place the markers using position:absolute. Then for each breakpoint, I update the coordinates. It's not too much of a job and it allows you to have control over the spots for each device, which finally allows you to also change the zoom and crop on the map itself (on mobile devices a tighter crop is often more effective).

It's not done with custom attributes but with CSS. In the process you link that css http://cdn.rawgit.com/iamceege/tooltipster/master/dist/css/tooltipster.bundle.min.css and inside there are many classes so it's not easy to take over.

Why do you want to use this tooltip library? Why not create a popup interaction right in Webflow using Interactions? You can design 1 unique interaction limited to a child object of your pin (marker) element, so you reuse it for all the markers.

Start by creating a popup inside of your marker element. Nest the marker in an extra dic if you need it. Design the popup and content as you like, position it with absolute, it will take its parent, the marker container, as a reference. Hide the popup and use interaction to show it on hover of the marker.


#5

Thank you so much Vincent! Very kind of you to take the time. I’ll give that a go.


#6

You can try using storepoint for this: https://storepoint.co/webflow-store-locator-app we've customized a few maps with them to accomplish this and similar use cases - no need to code


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.