Blog

How to Embed a Google Map

A popular item on many websites is to embed a map in lieu of, or along side driving directions for your visitors. Google Maps makes this especially easy to embed on your site. Here is how to do it:

  1. Head to http://maps.google.com/. Add your address and ensure the map is displaying the correct address.
  2. Click the blue “Link” link/button located on the far right side of the screen. In that menu, click “Customize and Preview Embedded Map”.
  3. In the pop up window, adjust your size and position the map as you would like it displayed on your site.
  4. Click in the HTML code window and copy all. Keep that pop up window up while you continue your next steps.

  5. Head to your Navigation Builder Home in your FWS admin site and go to the page you want your map to appear on (or go to edit the page). Click on the Main Body link and either add a Text/Graphic Editor to the page, or edit the editor your map already appears on.
  6. In the Text Editor, click the “Source” button. (You must always be in “Source” mode when you copy and paste HTML code within an editor.) Paste the HTML code into your editor.

  7. Click “Update”. Preview your page – your map should be displayed. If you need to adjust, go back to the Google Maps pop up window, make your adjustments, recopy the entire code.

    Go back to your Text Editor, click on Source and first delete all the code – make sure nothing is in that Source window. Then paste the new HTML code and click Update.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our RSS Feeds

Blog Search

Join Us on Twitter

Join Us on Facebook