How do I make a Waze iFrame open up Waze app with deep link?

Question

I have integrated a Waze iFrame map into a website, as explained in their docs here.

It shows the location that I want, but I would love it if the viewer could click on the map and have it open the Waze application through the deep link.

I have tried including the deep link as an anchor tag, but it will only make the border of the div that contains the iFrame clickable.

What is the best way to make the link clickable on top of the iFrame?

score 1 · Answer 1 · answered Apr 27 '20 at 15:54

1

I found a solution. I added the link as an anchor tag within the same div as the iFrame, then set the following in the style:

style="position:absolute; top:0; left:0; display:inline-block; width:600px; height:400px; z-index:5;"

This makes the entire map clickable, which sends the user to the waze app with the location already in the app, or respective app store to download.

answered Apr 27 '20 at 15:54

Ben Wedlund

43
4

1

Looks a little hacky, but does the trick. After doing this, parts outside of the ` were also clickable (not good), so I added `style="position: relative;"` to the `<div>` containing both the `<a>` and `<iframe>` tags. Also, just for others reading this solution, the `width` and `height` in the `<a>` tag refer to the actual width and height of the `<iframe>`, so plug those in there.
– Pablo Alexis Domínguez Grau Feb 14 '21 at 08:04

How do I make a Waze iFrame open up Waze app with deep link?

1 Answers1