マップを２つ表示する（デュアルマップ）

説明

マップを２つ表示させ片方には地図、もう片方には衛星写真を表示させて見比べることもできます。マップを表示するためのコンテナをdivタグで用意します。サンプルではgmap1とgmap2の２つを用意しています。それぞれに対してnew GMap2()を使って地図を表示させます。片方のマップはsetMapType()で衛星写真を表示するように設定します。続きは書籍で、どうぞ...
逆引きGoogle Maps APIリファレンス 　詳しい解説などは逆引きGoogle Maps APIリファレンス、またはGoogle Maps 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"/>
<title>Sample</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map1, map2;
window.onload = function() {
map1 = new GMap2(document.getElementById("gmap1"));
map2 = new GMap2(document.getElementById("gmap2"));
map1.setCenter(new GLatLng(37, 138), 6);
map2.setCenter(new GLatLng(37, 138), 6);
map1.addControl(new GLargeMapControl());
map2.addControl(new GLargeMapControl());
map2.setMapType(G_SATELLITE_MAP)
GEvent.addListener(map1, "move", function(){
map2.setCenter(map1.getCenter());
} );
}
//]]>
</script>
</head>
<body>
<div id="gmap1" style="width: 400px; height: 300px"></div>
<div id="gmap2" style="width: 400px; height: 300px"></div>
</body>
</html>