Responsive Google Map Modal

Google Map API V3

This widget creates a Google map in a responsive modal window using the latest Google Maps API.
The map is created on the Google Maps website and then the embed URL is pasted into the widget settings.

Map Code

Go to the Google Maps website and enter the location into the box at the top left.
Adjust the zoom level and then click the menu icon located on the left side of the box.
Click on "Share or embed map".
Click "Embed map".
Copy the iframe code and paste it into Text Edit.app set to plain text mode.
It should look something like this …

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8923.307417434458!2d-4.744657531482656!3d56.004351780029644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!-
1m2!1s0x4889aea31ed021bb%3A0x87a820dcf141e625!2sColquhoun+Square%2C+
Helensburgh%2C+Argyll+and+Bute+G84+8AD!5e0!3m2!1sen!2suk!4v1464865491203
" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Highlight the URL which is marled in red, copy it or the clipboard and then paste it into the "Code:" box in the widget settings.

For instructions on setting up the modal button and general instructions about the modals, click the link below.

Full Width Modal Google Map Widget
Interactive Map

This widget is included in the Full Width Addons widget pack.

EverWeb Widgets | Full Width