How to insert a map in your blog 
An unofficial tutorial by Esa. Not officially authorised or approved by Google® or Blogger®. Tested in real world applications.
By following these basic instructions you can publish a Google Map of the location you like in your blog. It can be done in a post or sidebar. With no programming experience. If you can set links in your blog you can set a map as well. See examples with sidebar map or one with posted map.
- Prepare the design of your map.
What are you going to display? Following parameters should be chosen before you start
editing the source code:
- center coordinates (lng,lat)
- zoom setting 0...17
- dimensions of the map (width, height) in pixels
- map type(map/satellite/hybrid)
You can also set:- map type buttons or not
- zoom slider or small control buttons
You can quickly study and set those parameters on this design aid page.- find the location quickest by dragging the left map
- decide the size
- find the zoom
- write down the coordinates
- Get the Google Maps API key
- Open the template of your blog
Sign in to your blog. Select the 'Template' tab and you can see the html source code
of your blog.The top of the code looks like this:
- Copy/paste the following code just below the <head> tag
- Replace "YourGoogleMapsAPIKey" on the second line
with the key you received from Google.
Now your source code should look like this:
- Go to the end of html source code
Locate the point just above </body>
- Insert the following code
- Edit the parameters of the code
-
Set your center coordinates and zoom setting in:
map.centerAndZoom(new GPoint(-72.585, 42.102), 2);
Replace (-72.585, 42.102) with your center coordinates (longitude, latitude) comma separated and in decimal form. Replace 2 by your zoom level.
- Set the map type of your choice in:
map.setMapType(G_MAP_TYPE) ;
Select (G_MAP_TYPE), (G_SATELLITE_TYPE) or (G_HYBRID_TYPE)
- You can set different control button styles in:
map.addControl(new GSmallMapControl());
but small controls are stylish for a blog.
-
Set your center coordinates and zoom setting in:
- Place the map in the blog sidebar
Insert the following code to the template source code in the position of your choice:
Edit the width and height to your taste. Save and close the template. - Or place the map in a post
Create a new post. There are two modes in the Posting Create page. Compose and Edit Html. You can write your text in Compose mode but select Edit Html mode when you insert the following code:
Edit the width and height. - Publish
map loading...
Usually everything goes right the first time. If you did not edit any parameters, you should have exactly equal Springfield map as above. If you dont see a map at all above but the words 'map loading...' you should check your browser. Google Maps cannot be seen with too old browsers and JavaScript must be enabled.
- Push pin
Add following lines to the JavaScript at the end of your source code:
var point = new GPoint(-72.587, 42.1); var marker = new GMarker(point); map.addOverlay(marker);
The code should look like: - Many push pins Duplicate those three lines as many times as you like.
- Edit the coordinates
- Publish
kartta latautuu...
Usually everything goes right the first time.
- Study more to become an expert You can find many more features and possibilities by reading official Google Maps API documentation. Some JavaScript knowledge is needed.
- Feel free to link us
Did you find this tutorial useful? If so, please put a link in your blog.
<a href="http://koti.mbnet.fi/ojalesa/tutor/maphowtoblogger.html"> Map in your blog tutorial</a>
We will provide you some new tricks.
Design aid page | Feedback