Google Maps APIを使ったページの基本構成
Webページの中にGoogle Maps APIを記述する場合の基本構成について確認します。
まずベースとして次のXHTMLページを使用します。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
</head>
<body>
<p>
Google Maps APIを使ったサンプルです。
</p>
</body>
</html>
静的コンテンツだけが記載されたページと同じです。
まず初めにGoogle Maps APIを使用するのに必要なJavaScriptコードを読み込みます。このコードはGoogle側で用意されており、次のように読み込みを行います。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false"
type="text/javascript"></script>
</head>
<body>
<p>
Google Maps APIを使ったサンプルです。
</p>
</body>
</html>
パラメータがいくつか指定されていますが、これについては次のページ以降で説明いたします。
次に地図を表示するエリアをdiv要素を使って記述します。このdiv要素が後から地図に置き換わります。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false"
type="text/javascript"></script>
</head>
<body>
<p>
Google Maps APIを使ったサンプルです。
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
次にこのページで表示する地図に対するスクリプトを記述します。座標やズームレベルを設定したりマーカーを追加したり、さらに地図をクリックした場合などの処理を記載したりします。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&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(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body>
<p>
Google Maps APIを使ったサンプルです。
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
地図の表示は先ほど追加したスクリプトの中の関数を呼び出すことで行われます。どのようなタイミングで地図の表示を行うのかは自由に決めて頂いて構いませんが、Webページがブラウザに読み込まれた後で地図を表示する場合は次のように記述します。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&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(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<p>
Google Maps APIを使ったサンプルです。
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
body要素のonload属性に呼び出したい関数を指定します。するとページの読み込みが完了した後に指定した関数が呼び出されて地図の描画が始まります。なおonunload属性に指定されているGUnload関数はメモリリークを防止するために用意された関数で、Google側から読み込んだコードの中で定義されています。
Webページの中にGoogle Maps APIを記述する基本構成は以上となります。