Embedding a Google map into your website.

In this DIY post, I’d like to show everyone how to embed a Google map into your website using HTML. This is surprisingly quick because Google has made it quite simple for us.  To map a specific location on your page, go to maps.google.com.  Search whichever place or address you’d like to have a map for.  I chose to share the Cathedral of Learning, the site of our class meetings. You can also do this using the following website:  http://www.embedgooglemap.com/

Image

At the top left of the screen, you’ll notice this icon: Image.  Clicking this will give the user the option to copy and paste the map HTML and embed into his website.

When pasted into the index of your site, the HTML will display the map just like this.

Image

The map has the same functions on your page as it does on maps.google.com.  From here, you can click to search the map, get directions, etc.  Now, this is the simplest way of embedding a map on your page.  In another DIY post, I hope to learn to and then share how to embed Google maps that have an even greater functionality on your page.  Information on doing so can be found here: http://code.google.com/apis/maps/index.html and here: http://maps.google.com/help/maps/getmaps/plot-one.html.

 

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s