Embed Google Map Without White Panel Overlay

advanced-prototyping

#1

Hey,

Do you want to get rid of this irritating white panel? Read on!

So this has been driving me literally nuts. I finally found a solution and here it is:

Note date of entry Nov 2018 using Axure RP 8 - in case Google / Axure change anything and this goes out of date. A clear challenge in finding this answer.

Let’s say you want to embed a map of Germany into your Map iframe -

  1. Go to maps.google.com

  2. Search for Germany

  3. Click on the ‘Share’ icon (just underneath Directions)

  4. Click on the ‘Embed a map’ tab in the lightbox panel

  5. Click on ‘COPY HTML’ link (top right-ish)

  6. Paste the code into a blank document (I use email, seeing as it’s always open):

  7. Remove everything before the first " quote mark, and everything after the " quote mark before the ‘width=’ bit - including the quote marks " (Highlighted in red)

  8. Now find the code between 3m3! and 3m2! and remove it. (Highlighted in blue)

  9. Take the remaining code and copy that. You should be left with something that looks like this:

  10. In Axure select an ‘Inline Frame’ from the Libraries.

  11. Set the preview image to ‘map’ (not necessary, but helpful) - you’ll find this within the ‘Inspector’ area.

  12. Double click on your ‘inline frame’ map image.

  13. In the pop-up box, select ‘Link to an external url or file’ right near the bottom of the frame - and paste in your copied map code:

  14. Click OK and VOILA!! - OK, it doesn’t look like much until you click on preview… then ‘Voila!’. No huge white box in the top left corner. Sure, smaller option to see a larger map, but more bearable.

Yay! Now I can get back to work.

Thanks to everyone who writes up their questions and even more so to the guys that answer them (correctly), with examples. You have made so many challenging issues disappear, opening up the power of Axure for my prototypes. That’s why I thought I best give back :wink:

Enjoy prototyping!


unlisted #2

closed #3