Google Mapを一つのページに２つ以上表示させる(レスポンシブ対応)

どうもWebデザイナーのあさみです♪

今回はとあるクライアント様の制作で店舗が２つある為、マップを一つのページに２つ配置した際にエラーが起こりマップが表示されなかったりと不具合があったので以前記載した、Googlemapカスタマイズ方法【JavaScript編】とは異なるコードを使用したのでご紹介致します。

HTML

<div id="google-map_1"></div>
<div id="google-map_2"></div>

CSS

#google-map_1,
#google-map_2 {
width: 100%;
height: 280px;
margin: 10px 0 20px 0;
}
/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media (max-width:480px){
#google-map_1,
#google-map_2 {
width: 100%;
height: 250px;
margin-bottom: 20px;
}
}

JavaScript

/* 古都京都の文化財
=======================================================*/
function googleMap() {
var latlng = new google.maps.LatLng(34.990987, 135.775167);/* 座標 */
var myOptions = {
zoom: 18, /*拡大比率*/
center: latlng,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('google-map_1'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('../images/marker01.png',/*画像url*/
new google.maps.Size(28,49),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '古都京都の文化財',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "hue": '#9fb7d4' }
]
}
];
var styledMapOptions = { name: '古都京都の文化財' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
/* 嚴島神社
=======================================================*/
function googleMap02() {
var latlng = new google.maps.LatLng(34.295968, 132.319835);/* 座標 */
var myOptions = {
zoom: 18, /*拡大比率*/
center: latlng,
scrollwheel: false,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('google-map_2'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('../images/marker01.png',/*画像url*/
new google.maps.Size(28,49),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '嚴島神社',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions =
[{"stylers": [
{ "hue": '#9fb7d4' }]}];
var styledMapOptions = { name: '嚴島神社' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
google.maps.event.addDomListener(window, 'load', function() {
googleMap02();
});

２つ以上マップを増やす場合は、最初の

function googleMap()

の部分と最後の

googleMap();

の部分を書き換えて増やして下さい。

二つ目の最初の部分

function googleMap02()

二つ目の最後の部分

googleMap02();

サンプル表示

私の使用感では比較的、エラーが起こりにくく扱いやすいです。
初心者でも分かりやすいかなと思います。
参考になれば幸いです。
GoogleMapをレスポンシブ対応で埋め込む【API Key取得編】

それではまた(^_^)/~

• 参考記事
• Googleマップで緯度・経度を求める
• コードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツール