googlemapsのマーカーについて

Question

複数のgooglemapsをタブで切り替えしたく
こちらの記事を参考にさせていただき

記事
https://www.softel.co.jp/blogs/tech/archives/4069

サンプル
https://www.softel.co.jp/blogs/tech/archives/demo/jquery%E3%81%A0%E3%81%91%E3%81%A7%E3%82%BF%E3%83%96%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB-2-4

何とか表示・タブで切り替えすることができました。

この各マップにマーカーを表示させたく、他の方の記事なども参考に色々試してみたのですが、基本的な知識に乏しいため表示すらままなりません。

上記のサンプルスクリプトに追記する形でマーカーを表示させる方法をご教授いただけないでしょうか。

追記：マーカーは標準のものを各マップ中央に1つ（mapOptionsで座標指定しているポイント）表示したいです。
追記：下記にコード記載いたしました。

①

$(function() {
        var maps = {};
        var markers = [];
        var mapOptions = {
            center: new google.maps.LatLng(35.6713419,139.76541450000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        markers[0] = new google.maps.Marker( {
            map: map,
            position: new google.maps.LatLng(35.6713419,139.76541450000002),
        });
        maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6933865,139.76615270000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        markers[1] = new google.maps.Marker( {
            map: map,
            position: new google.maps.LatLng(35.6933865,139.76615270000002),
        });
        maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6712724,139.76160089999996),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        markers[2] = new google.maps.Marker( {
            map: map,
            position: new google.maps.LatLng(35.6712724,139.76160089999996),
        });
        maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);

        $('#tabs a[href^="#panel"]').click(function(){
            $("#tabs .panel").hide();
            $(this.hash).fadeIn();
            google.maps.event.trigger(maps[this.hash], 'resize');
            return false;
        });

        $('#tabs a[href^="#panel"]:eq(0)').trigger('click');

    });

②

$(function() {
        var maps = {};
        var markers = [];
        var mapOptions = {
            center: new google.maps.LatLng(35.6713419,139.76541450000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6933865,139.76615270000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6712724,139.76160089999996),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);

        markers[0] = new google.maps.Marker( {
            map: map,
            position: new google.maps.LatLng(35.6713419,139.76541450000002),
        });
        markers[1] = new google.maps.Marker( {
            map: map,
            position: new google.maps.LatLng(35.6933865,139.76615270000002),
        });
        markers[2] = new google.maps.Marker( {
            map: map,
            position: new google.maps.LatLng(35.6712724,139.76160089999996),
        });

        $('#tabs a[href^="#panel"]').click(function(){
            $("#tabs .panel").hide();
            $(this.hash).fadeIn();
            google.maps.event.trigger(maps[this.hash], 'resize');
            return false;
        });

        $('#tabs a[href^="#panel"]:eq(0)').trigger('click');

    });

お二方にご回答をいただき修正してみたところ、下記のコードでマーカーが表示されました。

$(function() {
        var maps = {};
        var mapOptions = {
            center: new google.maps.LatLng(35.6713419,139.76541450000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6933865,139.76615270000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6712724,139.76160089999996),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);

	var markers = [];
	markers[0] = new google.maps.Marker( {
            map: maps['#panel1'] ,
            position: new google.maps.LatLng(35.6713419,139.76541450000002),
        });
	markers[1] = new google.maps.Marker( {
            map: maps['#panel2'] ,
            position: new google.maps.LatLng(35.6933865,139.76615270000002),
        });
	markers[2] = new google.maps.Marker( {
            map: maps['#panel3'] ,
            position: new google.maps.LatLng(35.6712724,139.76160089999996),
        });

        $('#tabs a[href^="#panel"]').click(function(){
            $("#tabs .panel").hide();
            $(this.hash).fadeIn();
            google.maps.event.trigger(maps[this.hash], 'resize');
            return false;
        });

        $('#tabs a[href^="#panel"]:eq(0)').trigger('click');

    });

なんとかマーカーを表示させることができたのですが、マップのセンターがずれていることに今更ながら気づきました。（2番目のタブと3番目のタブに読み込んだマップ）
今回の質問内容とは異なる問題かと思いますので、一旦終了にすべきか迷っているのですが、改善策をネットで探してみたところ、私のレベルではここまでのコードを修正して改善できる自身がありません。
もし、改善策お分かりになる方いらっしゃれば、ご教授いただけませんでしょうか。

追記：HTMLソースと画像を添付してみます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
.nav-pills li a {
 border: 1px solid #cccccc;
}
.nav-pills li a.active {
 border: 1px solid #02acf8;
 background:#02acf8;
 color:#ffffff;
}
</style>
<script type="text/javascript">
$(function() {
        var maps = {};
        var mapOptions = {
            center: new google.maps.LatLng(35.6713419,139.76541450000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel1'] = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6933865,139.76615270000002),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel2'] = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);

        var mapOptions = {
            center: new google.maps.LatLng(35.6712724,139.76160089999996),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        maps['#panel3'] = new google.maps.Map(document.getElementById("map_canvas3"), mapOptions);

    var markers = [];
    markers[0] = new google.maps.Marker( {
            map: maps['#panel1'] ,
            position: new google.maps.LatLng(35.6713419,139.76541450000002),
        });
    markers[1] = new google.maps.Marker( {
            map: maps['#panel2'] ,
            position: new google.maps.LatLng(35.6933865,139.76615270000002),
        });
    markers[2] = new google.maps.Marker( {
            map: maps['#panel3'] ,
            position: new google.maps.LatLng(35.6712724,139.76160089999996),
        });

        $('#tabs a[href^="#panel"]').click(function(){
            $("#tabs .panel").hide();
            $(this.hash).fadeIn();
            google.maps.event.trigger(maps[this.hash], 'resize');
            return false;
        });

        $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
		
    });
</script>
</head>

<body>
	<div id="tabs" class="col-md-6">
		<ul class="nav nav-pills">
			<li class="tab-btn1"><a href="#panel1" class="active">銀座4</a></li>
			<li class="tab-btn2"><a href="#panel2">神田1</a></li>
			<li class="tab-btn3"><a href="#panel3">銀座6</a></li>
		</ul>
		<div id="panel1" class="panel">
			<div id="map_canvas1" style="width:500px; height:400px;"></div>
		</div>
		<div id="panel2" class="panel">
			<div id="map_canvas2" style="width:500px; height:400px;"></div>
		</div>
		<div id="panel3" class="panel">
			<div id="map_canvas3" style="width:500px; height:400px;"></div>
		</div>
	</div>
</body>
</html>

上記のHTMLソースでタブ銀座4は問題なく座標指定した銀座4丁目がセンターに表示されポインターもセンターに表示されます。

タブ神田1と銀座6はマップのセンターが座標指定した位置ではなく
センターに表示したい座標（ポインターの位置も同様）が左上の見切れた場所にあります。

Comments

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

[yoshinori_w]

アドバイスありがとうございます。コード追記いたしました。

[退会済みユーザー]

マーカーはどこに表示したいのか、マップの中心？任意の場所？マーカーの数は？複数のマーカーを表示したいのなら、その緯度経度の情報はどこに持つの？など、具体的な仕様が提示されていません。

[yoshinori_w]

情報が不足しておりすみませんでした。

Answer 1

yoshinori_w さんへ

はじめまして。
概ね、kei344さんのご指摘通りなのですが、処理の順番と変数（mapOptions）の上書きが原因ですね。

mapOptionsを配列にするか、mapOptionsの設定→maps生成→markers設定とすればよろしいかと。

Comments

[yoshinori_w]

ご回答ありがとうございます。
処理の順番というヒントを元になんとかマップとマーカーを表示させることができました
。
現在別の問題が発生しまして、ルール違反かもしれないので一旦この質問を閉じるべきか悩み中なのですが、助かりました。ありがとうございました。

Answer 2

このあたりとかを読めば出来ると思います。

【Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)】
https://syncer.jp/google-maps-javascript-api-matome#sec-4

Comments

[yoshinori_w]

ご回答ありがとうございます。
参考サイトを見ながら色々なところに該当ソースを編集して挿入してみたのですがマーカーは表示されませんでした。

基本的な事が分かっていないので、いきなり応用は難しそうですね。
参考サイト良く読んでもう少し基本を理解してみたいと思います。

[kei344]

どのように書いたかを質問文に追記してみてください。（現在質問文に有るコードはそのままで新たに追記してください）

[yoshinori_w]

気にかけていただきありがとうございます。
①②のように考え付く場所に入れてみました。
参考サイトにある
配列でなく個々に指定する
marker1 = new google.maps.Marker( {...} ) ;

の方法でも試してみたのですが表示されませんでした。
何処がどう悪いのかも分からず、お手数をおかけいたしますが、また見ていただけるようでしたらよろしくお願いします。

[yoshinori_w]

map: map,　を　map: maps,　に変えてみたり削除したり、考え付くところは色々いじってみたのですが全てあてずっぽうなので煮詰まってしまいました。

[kei344]

google.maps.Marker( { map: my_map,･･･ の `my_map` には new google.maps.Map で作った 変数を入れます。（ ex.「 maps['#panel3'] 」 ）

1,2はどちらも同じ挙動をするはずなので、どちらを使っても良いと思います。

[yoshinori_w]

何度もありがとうございます。
ご教授いただいた方法で、それぞれのマップにマーカーを表示させることができました。
ただ、できたとばかり思っていたgooglemapsのタブ表示がセンター位置ずれていたことに今更気が付きました。
これは今回の質問内容とは異なる問題かと思いますので試行錯誤してみたいと思います。
ありがとうございました。

[kei344]

「タブ表示がセンター位置ずれていた」というのは「どのようになるべきところ」が「どうなっているか」をより具体的に提示ください。できれば画像などで「ここをこうしたい」など指示いただいたほうがわかるかもしれません。

[yoshinori_w]

親切に本当にありがとうございます。
HTMLコードや画像を追加いたしました。

[kei344]

処理のながれ：
・タブの切り替え時にマップのセンターを取得する
・それを連想配列で保存しておく
・google.maps.event.trigger 後に保存されているその値でセンターを指定する

連想配列は var maps = {};の次の行くらいに var now_center = {};みたいな感じですかね。あとは、getCenter()とかsetCenter()をつかって、回答に提示したサイトを見ながら頑張ってみてください。

[yoshinori_w]

ご丁寧にありがとうございます。
こちらは少し時間がかかりそうなので、お教えいただいた方法で色々やってみます。
一番の問題が解決し、本当に助かりました！