googlemap 同じ地図を複数表示させる

Pocket
[`evernote` not found]

当たり前と言えば、当たり前なのですが、少しはまって解決したので。

googlemap をサイトに埋め込む状況は沢山ありますが、たとえば、サイドバーに小さい地図をいれて、
会社案内のページに大きな地図をいれるようなことがあると思います。
そんな時

jQuery(document).ready(function($) {
  var latlng = new google.maps.LatLng(36.238701,137.969526);
        var options = {
            zoom: 15,
            center: latlng,
            navigationControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('sdMap'), options);
        var sdMap = new google.maps.Map(document.getElementById('map'), options);
       
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(36.238701,137.969526),
            map: map
    });

        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(36.238701,137.969526),
            map: sdMap
    });

});

こんな風にvar map・・・を複数記述すると、複数の地図を描画してくれるんですね。
ただし、マーカーを付ける場合、地図を表示させる変数を指定しないといけないので、
その部分は重複して記述しないとだめのようです。

あと、jQueryの$(document).readyでいけるんですね。

知らなかった・・・

DEMO

えっと、それだけじゃあれなんで、googlemapのネタをもう一つ。

上記のような方法でgooglemapを埋め込む時、座標を調べなければなりません。
いくつか専用サービスがありますが、google mapを使うと便利です。

google mapで目的の場所を表示して、地図上で「右クリック」→「この場所について」で、座標を表示してくれます。

地味に便利なので覚えておくといいかもしれません。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。