Blog

HOME > Web > Googleマップ > 【Javascript】Google Mapを２つ表示

【Javascript】Google Mapを２つ表示

2015/06/26

Googleマップ javascript

Google Mapを２つ表示してほしいということで、やってみたところ、
あれ！ひとつしか表示されない！！

というわけで、表示する方法を調べて実装しました。

参考サイト
Googleマップを１つのページに２つ表示

参考サイトとは違いますが、head内に下記スクリプトを書きました。

<script type="text/javascript">
$(function(){
    var op01={
     zoom:16,
     center:new google.maps.LatLng(35.693242,139.749873),
     mapTypeId:google.maps.MapTypeId.ROADMAP
    };
 
    var map01=new google.maps.Map(
     document.getElementById("map_canvas"),
     op01
    );
 
    var obj01={
     position:new google.maps.LatLng(35.693242,139.749873),
     map:map01
    };
 
    var marker=new google.maps.Marker(obj01);
 
    var info=new google.maps.InfoWindow({
     content:'hogehoge'
    });
 
    info.open(map01,marker);
 
});

$(function(){
    var op={
     zoom:14,
     center:new google.maps.LatLng(35.704279,139.751942),
     mapTypeId:google.maps.MapTypeId.ROADMAP
    };
 
    var map02=new google.maps.Map(
     document.getElementById("map_canvas_s"),
     op
    );
 
 
    var obj02={
     position:new google.maps.LatLng(35.704279,139.751942),
     map:map02
    };
 
    var marker=new google.maps.Marker(obj02);
 
    var info=new google.maps.InfoWindow({
     content:'hogehoge'
    });
 
    info.open(map02,marker);
 
});
</script>

表示したい箇所に

<div id="map_canvas"></div>
<div id="map_canvas_s"></div>

を入れて完了です。

表示位置などはcssで調整します。

本社、支社や事務所・店舗など、２つGoogle Mapを表示するときに役立ちそうです。



ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ