Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

SOVLED: VIDEO: How To Embed An Interactive Google Map Into Your Website

Dec 2016 Posted by in Other Technologies | Comments

If you have ever tried to figure out how to insert a clickable interactive map into your website, you likely have found a number of utilities and plugins that will do the work for you.  However, there is a straight forward way to insert a Google Map into your website without any tools.  You can even make the map different sizes.  Even better, you can easily embed a clickable interactive Street View map.

The simple instructions to embed a Google Map (below) look more complex than they are so I would just watch the short video:

  1. Surf to www.GoogleMaps.com using for favourite browser
  2. In the GoogleMaps search bar at the top left, type in the name of address of the location you are interested in
  3. Use your mouse or other controls to zoom the map to the position you would like it to be
  4. Click the MENU icon in the GoogleMaps bar at the top left
  5. Select EMBED
  6. Click the EMBED TAB
  7. Click the SIZE drop down and select the map size you want
  8. Copy the address shown in that EMBED tab
  9. In a different tab or session use your browser to open up the page on your site that you want to add the map
  10. Change to your HTML / ASP / TEXT editor (do NOT use a graphical editor)
  11. Paste the iFrame information you copied in step 8
  12. Save your changes
  13. Have a nice day

This short video explains how to embed an interactive Google Map into nearly any website, even though it demonstrates it on WordPress, mentions Joomla and discusses HTML or ASP sites.

The instructions for embedding a Google Street View are very similar but once you change your www.GoogleMaps.com to Street View (drag the street view ‘man’ in the bottom right corner to where you want, or just double click streets until you drill down into Street View) you have to click the “3 dot” menu and select the same SHARE OR EMBED IMAGE option:

embed-interactive-google-street-view-into-website

 

Share This With Your Friends Now:
Facebooktwittergoogle_plusredditpinterestlinkedin

Leave a Reply