Embedding Google Maps into your Flipbook

As you can see in the sample below Google Maps has been both embedded on the page (page 3) and a hotspot has been added that pops Google Maps out on top of the page (page 2). I have included instructions for both of these features below for you.

• Sample: https://cloud.3dissue.com/164281/164545/192230/164-bishop-drive/?page=3

Firstly, you need to find the embed link for the map you would like to add to your publication; you can do this by following the steps below.

1. Search in Google Maps for the place you want to include in your publication.
2. Click the Menu icon in the top left corner of Google Maps.
3. Choose Share or Embed Map.
4. Choose Embed Map and then copy the iframe code
5. Remove everything in the iframe code as highlighted in bold below, except the web link (blue).
   <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2852.733212456086!2d-79.71625998447928!3d44.35653147910352!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882abd0da51fe805%3A0xe43c9588ce190ec0!2s164+Bishop+Dr%2C+Barrie%2C+ON+L4N+6X5%2C+Canada!5e0!3m2!1sen!2ses!4v1518019585504” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
6. From the above iframe code, you are extracting the highlighted link as seen below.
   https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2852.733212456086!2d-79.71625998447928!3d44.35653147910352!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882abd0da51fe805%3A0xe43c9588ce190ec0!2s164+Bishop+Dr%2C+Barrie%2C+ON+L4N+6X5%2C+Canada!5e0!3m2!1sen!2ses!4v1518019585504

Now that you have the embed link for your map you can add it to your publications through the software. In the DESIGN tab of the software under Interactive there are two features you can use to add your map to your publication; Embedded HTML5 Animation Tool (Embedded Google Maps) or Webpage (Pop-out Google Maps from Button/Hotspot).

1. Select the Embedded HTML5 Animation Tool or Webpage Feature in the software.
2. Drag the desired area you would like to embed the map or place a hotspot/button on the page.
3. Paste this web link into the URL/HTML5 fields in Webpage Settings/Embedded HTML5 Settings
4. Click OK.
5. Build your publication to see the output with Google Maps included.

See screenshots below for reference.

1. Search for Location
2. Click Menu Icon
3. Click Share or Embed Map
4. Embed Map > Copy iframe link shown
5. Click Embedded HTML5 Animation Tool OR Webpage under Interactive in the DESIGN tab
6. Paste the web link you extracted from the iframe link you obtained above into the URL/HTML5 fields in Webpage Settings/Embedded HTML5 Settings and click OK.
7. Then Build your publication to see these changes take effect!