GoogleMapのカスタマイズマップを1ページに2つ埋め込みできない

###前提・実現したいこと
wordpressの固定ページ（1ページ内）に2つのGoogleMapを埋め込みたいのですが、1つしか埋め込みができなくて困っています。

埋め込み方法は
http://proclass.jp/blog/?p=1139
のようにアイコンが動いたり色を変えたカスタマイズマップになります。
Google API使用です。

###該当のソースコード

下記コードを使用して1つは反映されますが、
2つ反映されるようにコードをうまく組むことが出来ない状態です。

<script type="text/javascript">
function googleMap() {
var latlng = new google.maps.LatLng(35.014370, 135.795566);
/* この数字の所にさっきGoogleMapで調べた住所の座標を入れる！ */
 
var myOptions = {
    zoom: 17, /*拡大比率。0～17で数字が大きいほど拡大！0にすると世界地図になっちゃうよ*/
    center: latlng,/*地図の中心を指定*/
    mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
/*'map'の部分は地図を表示させたいdivのid名を入れよう*/
 
/*アイコン設定*/
var icon = new google.maps.MarkerImage('./images/mapicon.png',/*アイコンのURL*/
new google.maps.Size(58,42),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコンの位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '永観堂',/*タイトル*/
 
animation: google.maps.Animation.BOUNCE
/*ずっとぴょんぴょんしているBOUNCEか、最初にボトッと落ちてくるDROP。
動かなくていい場合はこの1行は不要*/
 
};
var marker = new google.maps.Marker(markerOptions);
var styleOptions = [
/*★★ここに後でカスタマイズするデザインの内容が入ります★★*/
];
var styledMapOptions = { name: '永観堂' }/*地図の上に表示されるタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
</script>
 
<div id="map" style="width: 100%; height: 300px;">
<!--このdiv内に地図を表示させる。サイズなどはcssで調整してね-->
</div>

###一言
GoogleMapの埋め込みやカスタマイズに詳しい方、ご回答していただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

以下の要素に対して地図を表示させるようなJavascriptになっています。

JavaScript
1var map = new google.maps.Map(document.getElementById('map'), myOptions);

HTML
1<div id="map" style="width: 100%; height: 300px;"></div>

document.getElementById('map')の「'map'」部分がHTMLのidと紐付いています。

複数設置しようとした手順はわかりませんが、
上記を考慮して実装してみてください。

投稿2016/11/08 01:56

mukkun

総合スコア882

退会済みユーザー

2016/11/08 02:35

mukutaJapさん、ご回答いただきありがとうございます。 ”map”とHTMLのidが紐づいているところまでは理解できました。なので、function googleMap() {　内の部分を2つ分に増やして idも”map1”と"map2"で変更してみましたが、そうすると2つとも表示がされなくなってしまいました。 function内でどのように2つを記述したら 2つ表示されるのでしょうか？

mukkun

2016/11/08 02:46

function内をコピーするのではなく、 function自体を分けてみてはいかがでしょうか。動作確認はしていないですが、多分動くと思います。 ```HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> MAP1 <div id='map1' style='width:300px;height:300px;margin-bottom:100px;'></div> MAP2 <div id='map2' style='width:300px;height:300px;margin-bottom:100px;'></div> <script type="text/javascript"> function googleMap() { var latlng = new google.maps.LatLng(35.014370, 135.795566); /* この数字の所にさっきGoogleMapで調べた住所の座標を入れる！ */ var myOptions = { zoom: 17, /*拡大比率。0～17で数字が大きいほど拡大！0にすると世界地図になっちゃうよ*/ center: latlng, /*地図の中心を指定*/ mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById('map1'), myOptions); /*'map'の部分は地図を表示させたいdivのid名を入れよう*/ /*アイコン設定*/ var icon = new google.maps.MarkerImage('./images/mapicon.png', /*アイコンのURL*/ new google.maps.Size(58, 42), /*アイコンサイズ*/ new google.maps.Point(0, 0) /*アイコンの位置*/ ); var markerOptions = { position: latlng, map: map, icon: icon, title: '永観堂', /*タイトル*/ animation: google.maps.Animation.BOUNCE /*ずっとぴょんぴょんしているBOUNCEか、最初にボトッと落ちてくるDROP。動かなくていい場合はこの1行は不要*/ }; var marker = new google.maps.Marker(markerOptions); var styleOptions = [ /*★★ここに後でカスタマイズするデザインの内容が入ります★★*/ ]; var styledMapOptions = { name: '永観堂' } /*地図の上に表示されるタイトル*/ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('style', sampleType); map.setMapTypeId('style'); }; function googleMap2() { var latlng = new google.maps.LatLng(35.014370, 135.795566); /* この数字の所にさっきGoogleMapで調べた住所の座標を入れる！ */ var myOptions = { zoom: 17, /*拡大比率。0～17で数字が大きいほど拡大！0にすると世界地図になっちゃうよ*/ center: latlng, /*地図の中心を指定*/ mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById('map2'), myOptions); /*'map'の部分は地図を表示させたいdivのid名を入れよう*/ /*アイコン設定*/ var icon = new google.maps.MarkerImage('./images/mapicon.png', /*アイコンのURL*/ new google.maps.Size(58, 42), /*アイコンサイズ*/ new google.maps.Point(0, 0) /*アイコンの位置*/ ); var markerOptions = { position: latlng, map: map, icon: icon, title: '永観堂', /*タイトル*/ animation: google.maps.Animation.BOUNCE /*ずっとぴょんぴょんしているBOUNCEか、最初にボトッと落ちてくるDROP。動かなくていい場合はこの1行は不要*/ }; var marker = new google.maps.Marker(markerOptions); var styleOptions = [ /*★★ここに後でカスタマイズするデザインの内容が入ります★★*/ ]; var styledMapOptions = { name: '永観堂' } /*地図の上に表示されるタイトル*/ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('style', sampleType); map.setMapTypeId('style'); }; google.maps.event.addDomListener(window, 'load', function() { googleMap(); googleMap2(); }); </script> </body> </html> ```

退会済みユーザー

2016/11/08 03:07

function自体を分けて実装すればよかったのですね。 mukutaJapさんの上記コードで無事2つ埋め込みすることができました。助かりました、ありがとうございます！！

退会済みユーザー

2016/11/08 04:03

mukutaJapさん、再びすいません。先ほどのコードで実装はできたのですが、 /*★★ここに後でカスタマイズするデザインの内容が入ります★★*/ の部分にStyled Map Wizardを使用してコードを作りマップの色が変わるようにしてみたのですが何も変化がありませんでした。 ``` <script type="text/javascript"> function googleMap() { var latlng = new google.maps.LatLng(35.014370, 135.795566); /* この数字の所にさっきGoogleMapで調べた住所の座標を入れる！ */ var myOptions = { zoom: 17, /*拡大比率。0～17で数字が大きいほど拡大！0にすると世界地図になっちゃうよ*/ center: latlng, /*地図の中心を指定*/ mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById('map1'), myOptions); /*'map'の部分は地図を表示させたいdivのid名を入れよう*/ /*アイコン設定*/ var icon = new google.maps.MarkerImage('./images/mapicon.png', /*アイコンのURL*/ new google.maps.Size(58, 42), /*アイコンサイズ*/ new google.maps.Point(0, 0) /*アイコンの位置*/ ); var markerOptions = { position: latlng, map: map, icon: icon, title: '永観堂', /*タイトル*/ animation: google.maps.Animation.BOUNCE /*ずっとぴょんぴょんしているBOUNCEか、最初にボトッと落ちてくるDROP。動かなくていい場合はこの1行は不要*/ }; var marker = new google.maps.Marker(markerOptions); var styleOptions = [ { "featureType": "poi", "stylers": [ { "hue": "#ff4d00" } ] },{ "elementType": "labels.text", "stylers": [ { "hue": "#ff3300" }, { "visibility": "simplified" }, { "color": "#e43500" } ] },{ "featureType": "landscape", "stylers": [ { "hue": "#ffff00" } ] } /*★★ここに後でカスタマイズするデザインの内容が入ります★★*/ ]; var styledMapOptions = { name: '永観堂' } /*地図の上に表示されるタイトル*/ var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('style', sampleType); map.setMapTypeId('style'); }; function googleMap2() { var latlng = new google.maps.LatLng(35.014370, 135.795566); /* この数字の所にさっきGoogleMapで調べた住所の座標を入れる！ */ ...以下省略... }); </script> ``` どこか抜けている場所があるのでしょうか？

mukkun

2016/11/08 04:16

HTMLに起こして確認してみましたが、赤色に正常表示されますね。。もしかしたらキャッシュが残っている可能性があります。キャッシュを削除してもダメそうでしょうか。ダメそうであればソースコードを頂ければと思います。

退会済みユーザー

2016/11/08 05:16

ご確認までしていただいてありがとうございます。わたしが無駄なコードをいれていたので反映されなかったようです。無事色の変更もできました。長々とすいません、ありがとうございました！

mukkun

2016/11/08 06:47

いえいえ無事に実装できたみたいで良かったです。

行動規範の内容に同意します