複数のGoogle Mapsを表示

　Google Mapsのサンプルを元に、ブログからマップを呼ぶスクリプトを書きました。1エントリーずつ表示すると問題ないのですが、複数のエントリーを1画面で表示すると（１画面内で、複数のマップが呼び出されると）、何故か一つだけしか表示されません。

　で、ソースを見てみたらオブジェクトを一つしか生成していないので、上書きされてしまったのが問題のようです。IFrameを使うというのも一つの手ですが、ブログの制約上却下。単純に配列化したら、8割ほど上手く行きました。何故かコメントが一つしか表示されない。

ヘッダー貼り付け用

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=hogehoge" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
    //<![CDATA[
    var point;
    var map = new Object();

    function load(lng,lat,zoom,msg,id) {
      var str = "map["+id+"]";
      if (GBrowserIsCompatible()) {
        map[id] = new GMap2(document.getElementById(str));
        map[id].addControl(new GLargeMapControl());
        map[id].addControl(new GMapTypeControl());
        map[id].setCenter(new GLatLng(lng, lat), zoom);

        point = new GLatLng(lng, lat);
        map[id].addOverlay(createMarker(point, 1));
        map[id].openInfoWindowHtml(point,msg);
      }
    }

    function createMarker(point, number,msg) {
      var marker = new GMarker(point);
      return marker;
    }

    //]]>
    </script>

　コメント部分は、"map[id].openInfoWindowHtml(point,msg);"で生成しているのですが、これで問題ないと思うのですが。。。今度は、APIのソースを覗いてみます。（マニュアルには特に記載なし）

ボディー部分に

  <img src="space.gif" alt="space.gif" width="1" height="1" onload="load('35.687651', '139.763298', 15, '一つ目',20060427)"/>
  <div id="map[20060427]" style="width: 500px; height: 300px"></div>
  <img src="space.gif" alt="space.gif" width="1" height="1" onload="load('35.685302', '139.768528', 16, '二つ目',20060428)"/>
  <div id="map[20060428]" style="width: 500px; height: 300px"></div>

mapの引数は適当に。日付とかでも良いですが、060428などにするとエラーになりますよ。あくまで数値型なので。

※追記
Google Mapsがエラーで落ちるとページ全体が表示できなくなるので、可能であるのならばIFrameを使った方が良い。