Easy Step-by-Step Tutorial to Insert a Google Map Code in a Website Page

First login or regtister a Google account and get a Google API for your website here:

http://code.google.com/apis/maps/signup.html
a Google API loks like this:
ABQIAAAAjoYI18iwzhxdzE_oHo1bORQRyasdf8tDNhV3CFNpdUSnILgyHxSuu9rmuk4eBqx67BCZRJ6hvKErZA


I'm not sure how you make and update your website, but what you have
to manage to do is

1/to put this code

<script src="/http://maps.google.com/maps?file=api&v=2&key=PLACE YOUR GOOGLE KEY HERE&sensor=false"
type="text/javascript">
</script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"))
map.setCenter(new GLatLng(23.099401, 101.198437), 17);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());


// Create our "tiny" marker icon
var tinyIcon = new GIcon();
tinyIcon.image = "marker.gif";
tinyIcon.iconSize = new GSize(50, 50);
tinyIcon.iconAnchor = new GPoint(14, 70);
tinyIcon.infoWindowAnchor = new GPoint(7, 2);

// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 1; i++) {
var point = new GLatLng(southWest.lat() + latSpan / (2),
southWest.lng() + lngSpan / (2));
map.addOverlay(new GMarker(point, markerOptions));
}

}
}
</script>

at the start of any line between <head> and </head>, in your contact
page. note that map.setCenter(new GLatLng(13.099401, 103.198437), 17);
are your coordinates and "17" is the zoom level, you can change this.
if page headers are made automatically by a script rather than
independently on each page, they try to put the code in the index page
or where the script allows you to do it.

2/ change

<body>
with
<body onload="initialize()" onunload="GUnload()">
in your contact page.
if page headers are made automatically by a script rather than
independently on each page, they try to put the code in the index page
or where the script allows you to do it.

3/ Now you can insert your map:

<div id="map_canvas" style="width: 500px; height: 300px"></div>

anywhere in the page, and you can change the width and heith of the
map, it will always keep your coordinates as the center.

4/ in order to have your logo at the center of the page, you just have
to make a 72 dpi / 50x50 px logo or sign,
name it marker.gif,
and load it into the same
folder than the contact page (or of the index page, depending the make
of your website). It's a good idea to make a transp

I hope that works for you, don't hesitate to ask questions if you need.
I've already put your coordinates and stuff in the code, i hope i did
it alright... long time since I had to do that in html websites... in
any case, here's the basic instructions as per Google APIs:
http://code.google.com/apis/maps/documentation/introduction.html#Loading_the_Maps_API

This website uses Cookies