INTERESTIC NEWS | Google マップ API を使ってみる

今日は巷で流行っている[Google マップ API]を利用して
なにか出来ないかという事の手始めに、口火を切ってみたいと思います。

利用開始は以下のページから行います。
http://www.google.com/apis/maps/signup.html

規約に同意し、利用を考えているURLを指定します。
※ひとつのアカウントに対し、利用できるURLはここで指定するもののみとなります。

さするとページが遷移し、割り当てられたAPIキー、
指定したURL、サンプルコードが表示されます。

< *SAMPLEコード*>
<!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=(割り当てられたAPIキー)”
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>

以下実際に作成してみました。
SAMPLE

利用開始は以下のページから行います。
http://www.google.com/apis/maps/signup.html

規約に同意し、利用を考えているURLを指定します。
※ひとつのアカウントに対し、利用できるURLはここで指定するもののみとなります。

さするとページが遷移し、割り当てられたAPIキー、
指定したURL、サンプルコードが表示されます。

//<![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>

以下実際に作成してみました。
SAMPLE

さすがにこれでは味気がないので
以下のようなコードを追加してみました。

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
"小さなコントローラを追加する"
map.addControl(new GSmallMapControl());
"右上の表示切替ボタン"
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>
<body onload=”load()” onunload=”GUnload()”>
“サイズ指定”
<div id=”map” style=”width: 700px; height: 900px”></div>
</body>
</html>

SAMPLE2

Category このカテゴリは API 遊び