• 小
  • 中
  • 大

ページの基本構成


Webページの中でGoogle Maps APIを使い地図を表示する場合にHTMLタグにどのような記述が必要か順を追って説明します。APIキーは不用となっています。

ベースのHTMLとして下記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 v3 JavaScript API サンプル</title>
</head>
<body>
<p>Google Maps v3 APIを使ったサンプル地図。</p>
</body>
</html>

一般的なXHTMLページです。

HTMLタグ内でGoogle Maps v3 APIを使用する為には、最初にGoogle Maps v3 APIを使用するのに必要なGoogle発行のJavaScriptコードを読み込みます。以前はAPIキーが必要でしたが現在はv2のバージョンを含めて不要となりました。下記のように読み込みます。
<!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 v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>

</head>
<body>
<p>Google Maps v3 APIを使ったサンプル地図。</p>
</body>
</html>

パラメータとして「sensor」に値が設定されていますが、携帯端末のようにGPS情報を持つ場合,値をtrueにPC上から利用する場合はfalseに設定します。

次はこのページをブラウザで表示した際、地図を表示するエリアをdiv要素を使ってbodyタグ内に記述します。このdiv要素(id)に地図が埋め込まれます。
<!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 v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<p>Google Maps v3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

上記の場合は、地図のサイズ横500ピクセル、縦300ピクセルのマップが表示されます。

次に地図を表示するために必要な設定をスクリプトに記述します。(座標やズームレベルなどを設定)
<!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 v3 API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
}
</script>

</head>
<body>
<p>Google Maps v3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

これでinitializeのスクリプトが呼び出された時点で地図は表示されます。

通常は、記述ページがブラウザに読み込まれた後で表示することが多いため。次のようにbody要素のonload属性に呼び出したい関数を指定します。
<!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 v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
}
</script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

ページの読み込みが完了した後に指定した関数(initialize)が呼び出されて地図を表示します。

表示例 東京タワーを座標設定


Google Maps サンプル > ページの基本構成