さて、API Keyの登録に成功したならば、これから地図を組み上げていくことになります。
今後は、ｈｔｍｌタグの基本を理解していることを大前提として書いていくことにします。ゆえにｈｔｍｌタグについての解説は、いちいち行ないません。
Google Mapsを使ったページの例
Sign up for the Google Maps API のページからAPI Keyの登録に成功したならば、下のような画面が切り替わって出てくるはずです。
この画面の最上段が、あなたの登録で割り振られたAPI Keyです。
中段が、あなたが登録したディレクトリ＝フォルダです。
そして下段が、Googleが自動的に用意した、最も簡単なページの一例となっています。
下段にあるページの一例を見てみましょう。
<!DOCTYPE html PUBLIC "-//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=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxx"
type="text/javascript"></script>
|
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
|
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
|
|
３つの部分に色分けして表示しました。
結論から言えば、一番上の黄色の部分が各種の宣言及びJavascriptを呼び出す元の指定となっています。この部分は基本的に書き換える必要はないと思います。赤で表示している箇所が、登録によって割り振られたAPI Keyです。だからこのページは、登録したディレクトリ＝フォルダでのみ作動するはずです。
真ん中のピンクの部分は、Javascriptの本文となっています。
一番下の緑色の部分は、ページの"body"部分で、具体的にページに表示するための指定となっています。
このページの真ん中の部分より下をAPI Documentationに則り書き換えることによって、Google Mapsのいろいろな表現ができるようになっているのです。例では、ページを開くとこのような地図が出てくるようになっているはずです。
カリフォルニア州パロアルトが中心点にある、縦３００ピクセル横５００ピクセルの、１３段階目ズームの地図
|
|
次回以降、具体的なGoogle Mapsづくりに挑戦してみたいと思います。
