例−18：複数の地図を表示して、マーカーを追加したい

mainMap	miniMap
自作のOverview Map の基本的な作り方の例です。 GOverlay.copy() メソッドを使って、main mapのオーバーレイに追加された全てのオーバーレイをコピーして mini map に追加してます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 
    <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
            type="text/javascript"></script>
 
    <script type="text/javascript">
    //<![CDATA[
    
    var miniMap;
    
    function load(){ 
     
      var center_point = new GLatLng(35.677335,139.744613);
      var points = [];
      points.push(new GLatLng(35.6774, 139.74));
      points.push(new GLatLng(35.6772, 139.745));
      
      
      //地図インスタンスを作成
      var map = new GMap2(document.getElementById("mainMap"));
      miniMap = new GMap2(document.getElementById("miniMap"));
      
      //地図を表示
      map.setCenter(center_point, 15);
      miniMap.setCenter(center_point, 13);
      
      //map にaddOverlay したものを miniMap にも自動で追加するようにする
      GEvent.addListener(map, "addoverlay", onAddOverlay);
      
      //マーカーを作成して、各地図に追加する
      for (var i = 0; i < points.length; i++) {
        var marker = addMarker(points[i], "Marker #" + (i + 1));
        map.addOverlay(marker);
      }
    }
    
    //マーカーを作成して返す
    function addMarker(point, text){
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(text);
        });
        return marker;
    }
    
    //オーバーレイが追加されたら、コピーして miniMap に自動的に追加する
    function onAddOverlay(overlay) {
    
      //GOverlay を継承しているものなら何でもコピー
      if (matchingTest(overlay, GOverlay) === true) {
        miniMap.addOverlay(overlay.copy());
      }
    }
    
    //targetObject が matchClass に一致するかテストする
    //gmaps-utility-library(snapshotcontrol.js より)
    function matchingTest(targetObject, matchClass) {
      for (var key in matchClass.prototype) {
        if (key in targetObject === false && key !== "prototype" && key !== "__super") {
          return false;
        }
      }
      return true;
    }
    
    //ページがロードされたら、load 関数を実行して、地図を表示する
    window.onload = load;
    
    //ページを抜けるとき、メモリ開放
    window.onunload = GUnload;
    //]]>
    </script>

  </head>
  <body >
   <table style="width:auto;" border="1">
   <tr>
     <th>mainMap</th>
     <th>miniMap</th>
   </tr>
   <tr>
     <td valign="top"><div id="mainMap" style="width: 400px; height: 400px;margin:1em;"></div></td>
     <td valign="top"><div id="miniMap" style="width: 210px; height: 210px;margin:1em;"></div></td>
   </tr>
   </table>


  </body>
</html>