WEB Tips デザイン・コーディング

Google Map API V3 1ページに複数マップを表示する(レスポンシブで)

本記事にはプロモーションが含まれている場合があります。

Google Map API V3 1ページに複数マップを表示する(レスポンシブで)

会社案内やショップ案内のページで、グーグルマップを2つ設置する時の
備忘録。

Googlemap APIの読み込み

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

bodyに加える

<body onload="initialaze()">
(function(){
var lng =139.576042;
var lat =35.700030;
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_lg = new google.maps.Map(
document.getElementById("map_canvas_lg"),
myOptions
);
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map_lg
});
var myFukidashi = new google.maps.InfoWindow({
content: "井の頭自然文化園"
});
myFukidashi.open(map_lg, myMarker);
google.maps.event.addListener(myFukidashi, "closeclick", function() {
google.maps.event.addListenerOnce(myMarker, "click", function(event) {
myFukidashi.open(map_lg, myMarker);
});
});

latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_sm = new google.maps.Map(
document.getElementById("map_canvas_sm"),
myOptions
);
var myMarker02 = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map_sm
});
var myFukidashi02 = new google.maps.InfoWindow({
content: "井の頭自然文化園"
});
myFukidashi02.open(map_sm, myMarker02);
google.maps.event.addListener(myFukidashi02, "closeclick", function() {
google.maps.event.addListenerOnce(myMarker02, "click", function(event) {
myFukidashi02.open(map_sm, myMarker02);
});
});
}());

HTML
1カ所目

<div class="ggmap">
<div id="map_canvas_lg"></div>
</div><!-- /.ggmap -->

2カ所目

<div class="ggmap_sm">
<div id="map_canvas_sm"></div>
</div>

CSS

.map_wrapper {
max-width: 640px;
min-width: 280px;
margin: 20px auto;
padding: 4px;
border: 1px solid #CCC;
}

.googlemap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

参考サイトはこちら
[Google Map V3]地図を複数同時に表示する
ページ内に二つのGoogle Mapを設置する!

地図上にマーカーを表示させて、吹き出しに説明を出す

Google Map をレスポンシブ対応に

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大35%キャッシュバックで月額費用643円&ドメイン永久無料 - 2023年11月28日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF - 2023年11月30日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-