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.

  1. Prepare the design of your map.
  2. What are you going to display? Following parameters should be chosen before you start editing the source code:
    You can also set:
    You can quickly study and set those parameters on this design aid page.

  3. Get the Google Maps API key
  4. Open the template of your blog
  5. 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:

  6. Copy/paste the following code just below the <head> tag
  7. Replace
  8. "YourGoogleMapsAPIKey" on the second line with the key you received from Google. Now your source code should look like this:

  9. Go to the end of html source code
  10. Locate the point just above </body>

  11. Insert the following code
  12. Edit the parameters of the code
  13. Place the map in the blog sidebar
  14. 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.

  15. Or place the map in a post
  16. 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.

  17. Publish
  18. 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.

  19. Push pin
  20. 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:

  21. Many push pins
  22. Duplicate those three lines as many times as you like.

  23. Edit the coordinates
  24. Publish
  25. kartta latautuu...


    Usually everything goes right the first time.

  26. Study more to become an expert
  27. You can find many more features and possibilities by reading official Google Maps API documentation. Some JavaScript knowledge is needed.

  28. Feel free to link us
  29. 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