There are many guides out the there that explain in detail how to create a google map, however I struggled to find one that would show you how to create a Google map for your webpage, create a marker on the map, create an info window and make that window centre on the page and open automatically on page load. After doing all this I also wanted the map to load in satellite view as a default too.

The biggest flaw I found was in opening the html info window of the map automatically,  I managed to get this working in Firfox, however in the latest version of IE I simply received a Javascript error and the map would not load.

This tutorial will show you how to;

Create a Google map
get co-ordinates for your location quickly
Place a marker and info window on the map
Open the widow automatically
Load the map in Satellite mode as default

Lets start by obtaining your Maps API key from Google

Go here and sign up for a Google maps api Key http://code.google.com/apis/maps/signup.html

Once completed you will be provided with a Key that is unique to your domain name, copy this and put it somewhere safe for a few moments.

Open up your webpage in a HTML editor and place this line into the head section of your page.
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAoeym2RwBy_aygGSCU-AxjRQ7qZ61VBL5U7OYDjSzrhfRKw1GIxSNsyhPasBJnueyUp-gcfonzwIm1Q" type="text/javascript"></script>
Where it says key= be sure to include your key instead of the one seen here.

Now create the div that will contain your map

If you have not already done so, now is the time to create the area that you want the map to go in. Create a div in your html page with the ID map, so <div id="map">

In your style sheet, lets setup how you want it to look, for the sake of this tutorial, I will simply create a simple div;

#map { width:500px; height:500px }

Lets create the actual map

All of this code should be added in the head section of your website.

The first thing we are going to add is the event that will trigger the info window to open on page load. If you would prefer just to show your marker and not have the window open on load then ignore this section.
<script type="text/javascript">
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
</script>

Now we need to initialise the map and make it target the div you have just created, note: if your div has a different id then sipply chang “map” in the script below to your div.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.298344, 5.383221), 13);
}
}

This map is now centered over somewhere in France, you are probably thinking at this point, how the hell do I get the co-ordinates for where I want the map to show. You will be pleased to know that it is simple.

Go to http://maps.google.com/ and enter your location, lets choose Marseilles in France. click search maps.

Once the map has loaded enter this line of code into your browser address bar and press enter

javascript:void(prompt('',gApplication.getMap().getCenter()));

You should now have the co-ordinates open in a popup window ready for you use. Where in the code we have this

map.setCenter(new GLatLng(43.298344, 5.383221), 13);

Simply replace my co-ordinates with your own. We have now set the area that the map will show.

And now for your marker

We need to use the script to create a marker point, we also do this using co-ordinates, for the sake of this tutorial and to keep things simple, lets use the same co-ordinates that the map is located in.
var point = new GLatLng(43.298344, 5.383221);
var marker = createMarker(point)
map.addOverlay(marker);

Lets add your info window. This can contain HTML and you can even include images
map.openInfoWindowHtml(map.getCenter(),("<b>A Title</b><br>Text about France"));

Put it all together and you should have something that looks like this;
<script type="text/javascript">
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.298344, 5.383221), 13);
map.openInfoWindowHtml(map.getCenter(),("<b>A Title</b><br>Text about France"));
var point = new GLatLng(43.298344, 5.383221);
var marker = createMarker(point)
map.addOverlay(marker);
}
}
</script>

There is one final thing you need to do and that is initiate the map load when the page is viewed by someone, we do this by adding this piece of code in place of your body tag;
<body onload="initialize()" onunload="GUnload()">

The extras

I personally prefer maps to open in Satellite view by default and also with smaller controls on the map, we do this by adding the following to the script;
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GSmallMapControl());

And thats it! everything is now complete and if you want the same code as me, it should look something like this;


<script type="text/javascript">
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.298344, 5.383221), 13);
map.setMapType(G_SATELLITE_MAP);
map.openInfoWindowHtml(map.getCenter(),("<b>A Title</b>
text about France"));
var point = new GLatLng(43.298344, 5.383221);
var marker = createMarker(point)
map.addOverlay(marker);
}
}
</script>