Multiple responsive maps on same page

User 2694537 Photo


Registered User
26 posts

I have been using the CoffeeCup Image Mapper for years. It is one of my favorite tools! So, I was very happy to see version 5 for responsive maps.

One question - Is there some trick to having multiple responsive maps on the same page? The maps after the first seem to not work.

There is always chance that I will find out it is something I did :) , but I thought I would ask, in case someone else already had this issue.

Thank you!
User 122279 Photo


Senior Advisor
14,450 posts
Online Now

Have you tried giving them each a unique ID?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,188 posts

If you can share a link we may be able to help figure it out.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2694537 Photo


Registered User
26 posts

Thank you for the replies...
Yes, they have unique ID's :)

It seems to be the image maps within modal Reveals that is not working. I am still trying to figure it out.
I'm afraid I can't link. I am working on something for a new product in development that can't be made public at this time.
User 2694537 Photo


Registered User
26 posts

It might help to add... this page is going to have about 30 different image maps. All of them except one are in Reveal Modals.
I have done multiples many times on other pages that are not done in RSD and were not responsive, and never had an issue.
I wonder if it has something to do with how the js calculates the coordinates to make it responsive.
User 187934 Photo


Senior Advisor
20,188 posts

I betting the js needs adjustment to target multiple maps.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2694537 Photo


Registered User
26 posts

Eric Rohloff - yes it was the js.
I used a different script from https://github.com/davidjbradshaw/image-map-resizer
.. then added a imageMapResize() for each map name in (document).ready(function()
Now it works!!
User 2694537 Photo


Registered User
26 posts

I thought I would come back to add for others that might need to use multiple image maps, including in modal reveals... In addition to the js mentioned above, which can be used with whatever selection method you prefer (class, DOM, tag name, etc), you need to trigger the script to run on hidden Modals after they are revealed, or there is nothing for the script to resize.
This addition worked for me:
$(document).on('open.zf.reveal', '[data-reveal]', function() {
$('map').imageMapResize();
});

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.