2010/09/01

[Google Map V3]地図を複数同時に表示する

前回は、一つの地図を表示するだけでしたが、今回は、複数を同時に表示する方法について。

インスタンス作成時に、それぞれ別に変数に設定すれば表示することができます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
</script>
</head>
<body>

  <div id="map_canvas_01" style="width:400px;  height:500px;"></div>
  <br>
  <div id="map_canvas_02" style="width:400px;  height:500px;"></div>
  <script type="text/javascript">
  (function(){
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_01 = new google.maps.Map(
        document.getElementById("map_canvas_01")
      , myOptions
    );

    latlng = new google.maps.LatLng(35.658704, 139.745408);
    var myOptions = {
        zoom: 15
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_02 = new google.maps.Map(
        document.getElementById("map_canvas_02")
      , myOptions
    );

  }());

  </script>


</body>
</html>

実行結果は、このようになります。






時刻: 7:48
ラベル:

2 件のコメント:

  1. 匿名2015年10月22日 23:09

    はじめまして。
    複数表示させる方法について調べましたらここへたどり着きました。
    新しいコードを出している方もいるのですが、何故かこちらのコードしか上手くいかず困っています。
    ローカルテストですが、表示させることは無事出来ました。
    加えて、マーカーを配置したいのですが、どうすればいいでしょうか？
    var marker = new google.maps.Marker({
    position: latlng,
    map: mapObj
    });
    上記を足してみたりしたのですが、JavaScriptは初心者のためエラーが出てお手上げ状態です。
    お力添えを頂ければ幸いです。

    よろしくお願い致します。

    返信削除
  2. maito2015年10月23日 16:24

    ごめんなさい。

    5年前の記事なので、まったく思い出せないのですが、
    https://developers.google.com/maps/documentation/javascript/markers
    を今、みた感じだと、

    var map_02 = new google.maps.Map(
    document.getElementById("map_canvas_02")
    , myOptions
    );
    とした後、
    var marker = new google.maps.Marker({
    position: latlng,
    map: map_02
    });

    とすれば表示されると思うのですが。。。

    いかがでしょうか？

    返信削除

登録: コメントの投稿 (Atom)