If you want to add a google map to your website, like I did for Upstate Psychiatry, there are two options. The easy way... and the hard way. Hopefully I can make the hard way a little easier here.
The Easy Way
If you do not care for directions on your own site, and do not mind customers leaving your website for directions on google, the you should use google's map wizard.
This wizard totally rocks, you can generate a map in a few keystrokes with no coding at all - but wait... you need a google account. Having a google account is wonderful anyways, I will delve into that later. For now, just go to google.com and click to create an account at the top right main page of google. If you already have a gmail account use that to create a google account.
Before you go to the google wizard, decide how wide x tall your map should be on your website in pixels. You can create an empty div or table that is the proper size and leave it empty. Now plug those Height and width values into the google maps wizard. Also put your domain, and your address in the proper areas. then click the button - "generate code". Then simply place the code into the empty div or table.
The Somewhat Easy Way
If you do want directions on your own site (and hate people leaving your site for any reason like I do) why not have the directions spit out on your page?
1. The first thing you need is a google maps api key. sign up for it here http://code.google.com/apis/maps/signup.html .
2. Next, put this code into the <HEAD> code here </HEAD> section of your website.
<script src="http://maps.google.com/maps?file=api&v=2&key=REPLACE THIS TEXT WITH YOUR API KEY" type="text/javascript"> </script>
REPLACE THIS TEXT WITH YOUR API KEY!
3. Now, place this script in the <HEAD> code here </HEAD> section of your website also.
<script type="text/javascript">
/* Error messages for possible errors */
var error_address_empty = 'Please enter a valid address first.';
var error_invalid_address = 'This address is invalid.';
var error_google_error = 'There was a problem processing your request, please try again.';
var error_no_map_info = 'Sorry! Map information is not available for this address.';
/* The default address of your store (your main office or store maybe), we will display this address on the map on startup */
/* Edit this */
var default_address = '1600 Amphitheatre Parkway, Mountain View, CA 94043';
var current_address = null; /* Current address we are displaying, we save it here for directions */
var map = null; /* Instance of Google Maps object */
var geocoder = null; /* Instance of Google Deocoder object */
var gdir = null; /* Instance of Google Directions object */
var map_compatible = false; /* Whether or not user's browser is compatible to show the map */
/* Check if the browser is compatible */
if( GBrowserIsCompatible() ) {
map_compatible = true;
}
/* Initialize the map this will be called when the document is loaded from: <body */
function initialize_map() {
if( map_compatible ) {
map = new GMap2(document.getElementById('map_canvas'));
geocoder = new GClientGeocoder();
show_address(default_address);
}
}
/* This function will move the map and shows the address passed to it */
function show_address(address) {
if( map_compatible && geocoder ) {
/* Save this address in current_address value to use later if user wants directions */
current_address = address;
geocoder.getLatLng(
address,
function( point ) {
if( !point ) {
alert(error_no_map_info);
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
return false;
}
/* Get the directions */
function get_directions() {
if( map_compatible ) {
if( document.direction_form.from_address.value == '' ) {
alert(error_address_empty);
return false;
}
/**
* Delete the contents of 'directions' DIV first
* because user might ask for directions more than once.
**/
document.getElementById('directions').innerHTML = '';
gdir = new GDirections(map, document.getElementById('directions'));
/* Setup to event handlers, one: when the directions are loaded, two: if there was any error */
GEvent.addListener(gdir, 'load', onGDirectionsLoad);
GEvent.addListener(gdir, 'error', handleErrors);
/* Show the directions */
set_directions(document.direction_form.from_address.value, current_address);
}
return false;
}
/* This will actually set the directions on the map and loads the direction table */
function set_directions(fromAddress, toAddress) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": "en" });
}
/* This will handle the errors might happen while retrieving the directions */
function handleErrors(){
if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS )
alert(error_invalid_address);
else if( gdir.getStatus().code == G_GEO_SERVER_ERROR )
alert(error_google_error);
else if( gdir.getStatus().code == G_GEO_MISSING_QUERY )
alert(error_address_empty);
else
alert(error_invalid_address);
}
/* This function will be called when the directions are loaded */
function onGDirectionsLoad(){
/* We will simply scroll down to the directions, but with a little delay so it's loaded */
// setTimeout('eval(\'window.location = "#directions_table"\;\')', 500); /* Uncomment this line if you need to */
}
</script>
4. Search for this (Ctrl +F) in the code you just pasted:
var default_address = '1600 Amphitheatre Parkway, Mountain View, CA 94043';
CHANGE:
1600 Amphitheatre Parkway, Mountain View, CA 94043
...TO THE ADDRESS YOU INTEND TO USE.
5. Put this line of code where you want the map to go, (like in an empty div or table):
<div id="map_canvas" style="width:500px;height:400px;"></div>
REPLACE width:500px;height:400px; WITH THE WIDTH YOU INTEND TO USE.
6. Change your <body> tag to <body onLoad=
"initialize_map();"> If you already have onLoad, just add initialize_map(); in between the " ".
If you have other body styles just add the onload behind them:
7. Put this line of code where you want the 'get directions' form to appear on your page:
<form name="direction_form" return false;" class="form">
Need directions? Enter your address: <input type="text" name="from_address" class="form-field" /><br /><br />
<input type="submit" value=" Get Directions " class="form-submit" />
</form>
8. Put this line of code where you want to display the driving directions on your page:
<a name="directions_table"></a>
<div id="directions"></div>
9. You're done! (hopefully)
test it out...