Icons move out of place when I drag the map

Good evening everyone, I’m a student doing internship on UI and UX.
I’m trying to do a prototype with a dragable map and some interactive icons, but I’m having a problem. When I drag the map the icons go with the flow but they get out of place and doesn’t follow the flow very well…
The icons and the map image are both in the same state of the dynamic panel…

Can you post your rp file?

I’ve changed the icons for hotspots but the same happens…
(icons now belong to the map image)
1stry.rp (4.12 MB)

I’m not seeing the hotspots moving - how do you mean they get out of place? It’s not the easiest thing to see when you’re looking for a transparent widget with no interactions

sorry my bad… put some labels, drag the map around and see them getting out of place
1stry.rp (4.13 MB)

Hi, Pedro. Your OnDrag action moves both the dynamic panel and the map image with the drag. The map is thus moving twice as far as the drag, because the drag moves it directly as well as moving its container. To fix it, just remove the “move image with drag” action.

Jeff

Oh my god seriously, so easy? Thanks mate.

Hi guys, i`m quite new to axure and my question is, is it possible to do this with an ‘online’ google map or it has to be an image?? working on an app prototype and wanted to include a map with interactive hotspots…thank you in advance for any assistance.

Hmmm. When you use an inline frame to show a map from google maps, this is showing the map on a separate page; this makes it tricky to try to have widgets in the prototype move as the map on the external page moves, since it doesn’t trigger events like OnDrag or OnPageMouseMove. If you’re set on not using an image of the map, then you can try a setup like this:

  1. On one page, add an inline frame that links to your google maps. Make the inline frame very large on the canvas.

  2. Drop drop a hot spot widget on top of the inline frame and use it to cover the inline frame (this is to help block the dragging of the map on the external page).

  3. Drop your interactive widgets on top of the hot spot+inline frame, and then use ctrl/cmd+A to select all widgets on the page and put them into a dynamic panel. OnDrag of the dynamic panel, set up an interaction to “Move This with drag”.

  4. On another page in your prototype, add a smaller inline frame (about the size that you want the map to be) and link it to the page that you created in step 1. If you preview, you should be able to see the map at the desired size, with your widget on top of it, and they should all move together as the dynamic panel is dragged.

Alternatively, you could also try adding the pins directly to the google map prior to getting the embed code. Hopefully that helps!