はじめに
Google Maps（Google Local）のAPIを利用する方法を簡単に紹介しています。今回 は「衛星写真に切り替えるためのコントロールの追加方法と最初から衛星写真モード に設定する方法について」です。切り替え可能にする
前回に作成したコードに１行追加します。
<!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">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
{
var objPoint = new GPoint(nLatitude,nLongitude);
var objMarker = new GMarker(objPoint);
GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
objMap.addOverlay(objMarker);
}
AddGMarker(map,135.3659722,34.72072222,"甲子園駅");
//]]>
</script>
</body>
</html>
赤字が追加する部分です。太字の部分はAPI Keyです（人それぞれ異なる値です）。
実際に動かすと地図の右上にタイプの選択欄が表示され、「サテライト」をクリックすると衛星写真 が表示されます。
始めから衛星写真モードに設定する
作成したコードに１行追加します。
<!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">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_TYPE);
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
{
var objPoint = new GPoint(nLatitude,nLongitude);
var objMarker = new GMarker(objPoint);
GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
objMap.addOverlay(objMarker);
}
AddGMarker(map,135.3659722,34.72072222,"甲子園駅");
//]]>
</script>
</body>
</html>
赤字が追加する部分です。太字の部分はAPI Keyです（人それぞれ異なる値です）。
実際に動かすと最初から衛星写真の状態で地図が表示されます。
ここで追加した行の「G_SATELLITE_TYPE」というのは文字通り「サテライト」モードにするもので、 ほかに「G_MAP_TYPE」（通常の地図モード）「G_HYBRID_TYPE」（デュアルモード）が設定可能です。