How to Embed a Live Google Map on your Web Page?

Just about all the online mapping programs have the ability to neatly embed onto a blog page and I’m sure there are WordPress plugins that let you do that too, but it’s really quite easy, particularly with Google Maps, so instead of pointing you to some complicated solution, let me just show you how I embedded a live map from Google Maps onto a Web page of my own.

To start, open up another tab or bowser window and go to maps.google.com.

At this point, type in the address you want or otherwise move it to the area you’d like represented. Make sure you choose “map” or “satellite” or “hybrid” too.

Once you’ve got it all set up how you like, click on the three horizontal lines region to the left of the Search box.

Don’t worry about the floating Earth graphic, and if it’s pinpointing your current location, don’t worry about that either: both will vanish with the embed.

A click on the menu button (the three lines) and you’ll have a menu of options appear:

There are a number of things to explore here if you’re so inclined, including terrain maps for backpackers, but let’s stay on task!

Click on “Share or embed map” from the Google Maps menu.

Wondering what it’s showing? Lat and Long for a map centered on that point. That’s not what you want, however, so instead click on the “Embed map” tab at the top.

Now you’ll see what you seek:

Notice on the top of the window there’s a pre-selected blue text box. That contains the exact embed code needed to include this map – at this size – on your page.

But don’t do that. Instead, click on “Medium” to see the different size options:

For my purposes, small works better, so I choose “Small” and Google Maps adjusts the code in the box to match.

Great. Easy. And ready to go:

Copy the entire code line from this window and paste it as source into the WordPress or other page editor. It’s critical that you’re in “HTML” or “Source” or “Raw” mode to do this or it’ll fail.

But when it works and you publish the article, it looks splendid:

As suggested in the original message from Google, it really is a “live” map so users can click around, zoom in or out, etc.

And that’s how it’s done. Easy.

Want to see the map page live? Here’s where I embedded it: Pulled Over for Speeding!