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

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

今回はとあるクライアント様の制作で店舗が2つある為、マップを一つのページに2つ配置した際にエラーが起こりマップが表示されなかったりと不具合があったので以前記載した、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(); });

2つ以上マップを増やす場合は、最初のfunction googleMap()の部分と最後のgoogleMap();の部分を書き換えて増やして下さい。

二つ目の最初の部分

function googleMap02()

二つ目の最後の部分

googleMap02();

サンプル表示

古都京都の文化財

〒605-0932
京都府京都市東山区東大路七条上る妙法院前側町447

嚴島神社

〒739-0588
広島県廿日市市宮島町1−1


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

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


この記事へのコメント