Add a Google MAP to your Blog. ~ The Blog Doctor.

Add a Google MAP to your Blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!


To add a Google Map to your blog go to .......... and click on the Sign up for a Google Maps API key button. It will take you to this page : This key identifies your web site to Google and helps them track usage of Google Maps. A new and distinct key is needed for each directory on your website that includes Google Maps.
Put a check in the box where it says I have read and agree with the terms and conditions and paste your blog url in the text box below and click on Generate API Key button.

Copy paste this code (ONLY THE BLUE LINES) just below the title tag in your template :

<script src=' KEY' type='text/javascript'>
<script type="text/javascript">


function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 5);


Type in your Google API key code where it says 'YOUR KEY ' above.
Save Template. The addControl line adds a small pan and zoom control to the map. The next line centers and zooms the map to that latitude and longitude at zoom level 5.

Then paste this code inyour template just after <body> tag :

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>

Save Template.

Paste this code in the css part of your template :

#map {
margin:10px 20px 10px 10px;

Save Template

See how I have added it to my test site :
Click on image below for larger view.

IMPORTANT : It is necessary to have an empty space in the right hand part of the body of your template to add this in the way I have done. I have used the Minima template and added a float left property to the outside wrapper to create room for the Google Map on the right side.


Google Maps Has now made it possible to easily add Maps to your blog. Go to and navigate to the location you wish to show. Click on 'Link to this Page' Link on the top right hand corner of the map. In the drop-down copy the EMBED code under 'Paste HTML to embed in website'. Login at and click on '+New Post' link on Dashboard. The Post Editor will open. Click on Edit Html tab and paste the EMBED code there and publish.
You can adjust the width and height in the code to fit your post.
For example :

View Larger Map

You can also paste the code in a Html Page Element in the sidebar.

Technorati Tags:,


Anonymous said...


I have been trying to add a map to my blog for quite some time, but have not been successful. I have cut and pasted the code, but I keep getting an error message saying something to the effect of the HTML code being invalid.

My blog is all about my travel adventures and I'd like to create a link to my map that appears in the template sidebar to the left. I am using the dots template.

Can anyone help simplify this for me?

vin said...

What is your blog url/link? What is the url/link of your Google Map? Use the email address in the left column for detailed help.

Anonymous said...

Hi Vin,

I signed up for an API key and followed the instructions that I found on the blogger for dummies site, though I find the directions a little confusing. I think that's where I got into trouble and am perhaps putting the code in the wrong place since for me it was unclear.

vin said...


What is your blog url/link? What is the url/link of your Google Map? Use the email address in the left column for detailed help.

Laurie said...

Your instructions say: Copy paste this code (ONLY THE BLUE LINES) just below the title tag in your template :

Your information looks good, except I don't know what the "Title tag" is, or what is looks like.
Please help.
I am doing a blog about our trucking adventures, and would like to add a map that I can then "stick pins" into to indicate where we have been in the United States.
Any help would be greatly appreciated.
I am a very beginning newbie to blogging... using standard template (beta).
Thank you, Laurie

vin said...


Paste it just below </title>. Also see :

Chris said...

Neat! But how do I get a map (smaller and square, so as not to take up the entire page) into a posting, and not just the side-bar?
Is this possible?
Also, do you know if I need multiple API keys if I plan to post multiple, and different, maps I create?

Thank you!

vin said...



Anonymous said...

Hi vin
I have been trying to put a map on http://economicsandpolitics.blogspot and using the instructions here but to no avail.

Vin said...


Google Maps now provides EMBED code for each map. Copy that and paste in Edit Html tab of Post Editor.

vincent said...

Hello Vin
it is possible to add a MAP and the MAP will Point to the City you write in the Blog.
like here about Singapur

have a nice day

vincent said...

hello Vin

Vin said...


You can add a static Google Map.

rental mobil jakarta said...

Nice article, thanks for the information.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.