質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.62%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,232
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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の埋め込みやカスタマイズに詳しい方、ご回答していただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

var map = new google.maps.Map(document.getElementById('map'), myOptions);
<div id="map" style="width: 100%; height: 300px;"></div>

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/08 13:16

    HTMLに起こして確認してみましたが、
    赤色に正常表示されますね。。

    もしかしたらキャッシュが残っている可能性があります。
    キャッシュを削除してもダメそうでしょうか。

    ダメそうであればソースコードを頂ければと思います。

    キャンセル

  • 2016/11/08 14:16

    ご確認までしていただいてありがとうございます。
    わたしが無駄なコードをいれていたので反映されなかったようです。

    無事色の変更もできました。
    長々とすいません、ありがとうございました!

    キャンセル

  • 2016/11/08 15:47

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる