Step How To :: Step-by-Step

01. Go to Google maps

1.1 In your browser type the web address: maps.google.co.uk

02. Type in where you want the map to show

2.1 In the search field on the Maps web page, type in the address or postcode of the location.

03. Click the ‘Link’ button

3.1 Towards the top right of the page is the underlined word Link
3.2 Click Link

04. Click Customise…

4.1 A dialog pops up below the word Link of step 3.2
4.2 Click the underlined phrase: Customise and preview embedded map

05. Choose the map size

5.1 Click one of the radio buttons next to the size you want for your map.

06. Adjust the zoom and position

6.1 Click the arrows to adjust the position of the map shown.
6.2 Click the + or – to change the zoom level.

07. Choose the type of map to show

There are three types of map.
7.1 Map — A street map
7.2 Sat — A satellite map view (photographic)
7.3 Ter — A terrain map

Note: the different maps have different zoom levels.

08. Copy the <iframe… text

8.1 Click inside the box and to the left of <iframe… in the HTML text and drag down until all the text is selected.
8.2 Note: there is more text than can be seen. Dragging downward will scroll the unseen text into view. Make sure all the text is selected.
8.3 Press Cmd+C to copy the selected text. [Or Right-click and select Copy]

09. Paste the copied <iframe… text into the HTML of a Web Page

I will do this with the website creator Sandvox by Karelia.

10. Launch Sandvox Pro. Open your site document. Create a Raw HTML page.

10.1 Launch Sandvox Pro
10.2 Open your site document that you want to add the map to.
10.3 Add a Raw HTML page: Click the Toolbar button Pages > Raw HTML [Or use the menu: Site > Add Page > Raw HTML]

10a. Alternatively: Add it to a Rich Text page

10a.1 To add the iframe code to a Rich Text page in Sandvox Pro, Right-click in the text area and click ‘Edit Raw HTML…’

10b. Alternatively: Add it to a Rich Text page

10b.1 Click in the text area where the map is to go.
10b.2 Use the menu: Edit > Paste HTML into Text

11. Paste the copied <iframe… text into the Raw HTML page

11.1 Double-click on text that starts, "This is some HTML text…"
[You can also Right-click and Click 'Edit Raw HTML...' in that text or use the menu: Edit > Edit Raw HTML...]
11.2 In the HTML window that opens: Select All text that is already there: Press Cmd+A
11.3 Paste your copied iframe text: Press Cmd+V

12. A blank area will appear on the page within Sandvox.

12.1 Note: In Sandvox > Preferences… under General: there is an option Show "live" data feeds and pages (may slow down page loads). By default this is un-ticked and so the Raw HTML page will appear blank or appear as an empty box. To see the content appear within Sandvox, this option needs to be Ticked.

12a. The default Sandvox setting is to not ‘Show “live” data’

12a.1 In Sandvox > Preferences… under General:

12b. To see the iframe content in Sandvox, tick ‘Show “live” data…’

12b.1 In Sandvox > Preferences… under General:

13. Once the site is published or exported, the iframe tag content will show on the web page