Learn how to prototype web and mobile apps

How to embed Google Maps in your web and mobile wireframes

Learn how to embed Google maps in your web and mobile wireframes with this tutorial.

In this tutorial, we showed you how to embed videos and html content in your interactive wireframes. With Justinmind you can also embed other types of content, such as URL, documents (such as .pdf), flash videos, websites and even Google Charts! You will find all these Special Components in the widgets palette. Just drag and drop them onto the canvas and change their properties to personalize them as needed.

Embedding Google Maps in your wireframes


  1. Go to Google Maps and insert the desired address.
  2. From the hamburger menu in the top left-hand corner, select ‘Share or embed map’ and then the go to the “Embed map” tab.
  3. Copy the code.
  4. In Justinmind, drag an HTML widget to the canvas.
  5. In the Properties tab, paste the code into the HTML field of the General properties.
  6. Resize the HTML widget as desired.



And that’s it! Click ‘Simulate‘ to see your Google Maps location embedded in your wireframe.

Next tutorial > Your interactive wireframes: design scenarios