Google Maps Tutorial Is Another Way To Increase Your Profit !

In this tutorial I will show how to add a simple map (Google map) to your blogger Blog. Okay, here is a tutorial!

In this tutorial you will find a Google Map that does not give the correct location of blog nucleus Head office, but it would give them if I only would be so kind to provide the exact GPS location. So study on if you want to understand how you could add this map to your blogger Blog.

Before you embark, you have to know a few things, just to appreciate what is happening.

To succeed with Google Maps, Google has presented a lot of standard JavaScript functions. Those functions are used to depict the map, add markers, and add map controls (zooming, panning, etc). All these JavaScript functions jointly are called the Google Maps API (Application Programmers Interface). Those functions give us and boundary to work with the maps.

Next, you will require 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 lettering. Don't try to type it over, just copy and paste it into the code.

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

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

So, let’s go.

Step 1: Save your template.

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

file=api&v=2&key=YOUR_KEY_HERE' type='text/javascript'/>

msw&key=YOUR_KEY_HERE' 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 < and so on.

When you save the template, and switch to another screen, you will receive a warning massage that your API-key is not applicable. 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.