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



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

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

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

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

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;
}

シェアする

  • このエントリーをはてなブックマークに追加

フォローする