Google Maps API Version 3になってからAPIキーが不要になり、ホームページへ手軽に設置できるようになりました。
基本的なGoogle Mapsを設置するためのコードを、コンパクトにまとめてみました。
サンプルはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function() {
setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});
});
 
function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}
</script>
<title>Google Maps</title>
</head>
<body>
<div id="map" style="width:500px; height:500px;"></div>
</body>
</html>

最初に、Google Maps APIを読み込みます。

5
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Google Mapsを設置するための関数を呼び出します。引数にはオブジェクトで、表示するためのDIV要素のID、緯度、経度、ズーム、ウィンドウのテキストを入れています。

9
setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

関数はセンターにマーカーを表示して、クリックでウィンドウが開くシンプルな構成です。

12
13
14
15
16
17
18
19
20
21
22
23
function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}