Google Maps Tutorial

For some time now I have been looking into Google Maps, just to learn how to add a simple map to my Blog. Wouldn't you like to learn that as well? Okay, here is a tutorial!
In this post you will find a Google Map that does not give the exact location of Beautiful Beta Headquarters, but it would give them if I only would be so kind to provide the exact GPS location. So read on if you want to know how you could add this map to your Blog.

Before you set out, you have to know a few things, just to understand what is happening.

To work with Google Maps, Google has provided a lot of standard javascript functions. Those functions are used to draw the map, add markers, and add mapcontrols (zooming, panning, and so on). All these javascript functions together are called the Google Maps API: the Application Programmers Interface. Those functions give us an interface to work with the maps.

Second, you will need a key to work with Google Maps. This key is provided for a certain url. For each blog or website you have, you will need a key. You can get a key here. This key is a very long row of characters. Don't try to type it over, just copy and paste it into the code.

You have to add some javascript code to the head of your template. Insert it just above the </head>-tag.

The map itself will be drawn inside a <div id="map">. You can put this div anywhere, in a post, in your sidebar, or anywhere else.

So, here we go.

Step 1: back up your template.

Step 2: add the following javascript-code to your template head.

<!-- Google Maps -->
<script src='http://maps.google.com/maps?
file=api&amp;v=2&amp;key=YOUR_KEY_HERE' type='text/javascript'/>
<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;source=uds-
msw&amp;key=YOUR_KEY_HERE' type='text/javascript'/>
<script type='text/javascript'>
function LoadMap() {
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(YOUR_LONGITUDE, YOUR_LATITUDE), 3);
var point = new GPoint(YOUR_LONGITUDE, YOUR_LATITUDE);
var markertext = "YOUR_MARKER_TEXT";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml
(markertext);});
map.addOverlay(marker);
}
GSearch.setOnLoadCallback(LoadMap);
</script>

In this code you have to insert your own data on some places.
YOUR_KEY_HERE: paste your Google Maps Key here.
YOUR_LONGITUDE, YOUR_LATITUDE: enter your longitude and lattitude here, as GPS-coordinates. Find them with Google Earth, with your GPS-navigator, or with a Geocoding-application that converts addresses to GPS-coordinates.
YOUR_MARKER_TEXT: enter some text for the marker balloon. You can use html here, but you have to escape double quotes by putting a back-sledge (\) in front of it, and you have to change all < by &lt; and so on.

If you save the template, and switch to another screen, you will receive a warning that your API-key is not valid. This is caused by the fact that you requested the key for your blog's url, and editing the template is done at the beta.blogger.com url. You can ignore this warning.

Step 3: Place the map on your blog

Now add the following div to your sidebar, or to a post.

< div id="map" style="width:360px; height:260px; border:solid 1px #000000;">Loading map...</div>

Save and view your blog.