サイト内のgoogle Map に複数ピンを刺して、かつ該当ピンだけ色を変更したい

スポットを紹介するWEBサイトを構築しています。

各スポット記事にgoogle MAPで所在地を表示しているのですが、
WEBサイトで紹介するすべてのスポットをgoogle MAPにマーキングして該当のスポットを中心にして表示させたいです。

また、該当スポットがわかるようにほかのピンの色とは違う色で表示させたいですが、
Google MAPのマイマップ（マイプレイス）を使用して作成したものを共有させる方法ではできないでしょうか？

上記に対応していそうなプラグインも探してみましたが見当たりませんでした。

javascriptで自分で作成して実装する必要がありますか？

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

回答2件

iframeでの埋め込む方法があるようですよ。本文エリアにiframeが使えたかは覚えていませんが、探せば使う方法も出てくると思いますよ。

【Googleマイマップの使い方　地図の作成から公開まで | いわしブログ】
https://wind-mill.co.jp/iwashiblog/2018/06/google-mymap-create/

【新しいGoogleMapのマイマップをホームページに埋め込む時に、位置と縮尺を指定する手順 | 景観デザインを目指せ】
http://blog.enviro-studio.net/?eid=913

投稿2018/12/26 08:11

kei344

総合スコア69643

YuriY

2018/12/26 08:38

iFrameでの埋め込み方法を教えていただきありがとうございます！表示はiFrameで対応できそうです。 >該当スポットがわかるようにほかのピンの色とは違う色で表示させたいコチラ引き続き対応方法模索中ですので、何かご存知のことあればご教授いただけると幸いです。これからもスポットは増えていくので一つのマイマップで個別記事に該当するスポットのみ色を変える方法が設定でできると嬉しいのですが。。。

kei344

2018/12/26 08:45

マイマップ側の機能にマーカーの色を変える物があるのでは？提示した記事も色を変えていますよ。 (引用)> 追加した場所の下に編集用のアイコンがあるので、ここからマーカーの種類や色を変更したり、説明の編集、写真や動画を追加します。場所の削除もここで行います。

YuriY

2019/01/10 07:18

この方法で色を変更するには、色を変更したいスポットごとにマイマップを作成して行く必要がないでしょうか？同じマイマップ上で、１つのスポットだけ設定で色を変えて表示する共有URLが生成できたら、工数も少なく済むなと思ったのですが、１００以上あるスポットの該当スポットだけをそのスポット記事ごとに１つのマイマップで対応するのは難しいのだと判断しました。

CHERRY

2019/01/10 09:46

(横からですが...) ページによって、動的にピンの色を変えたい等について、あらかじめ全部のパターンを用意しておくか Google Map API を使って、パラメータで、マップを動的に生成するしか方法はないと思います。

YuriY

2019/01/11 01:40

CHERRYさん、返信ありがとうございます。その2パターンと思いましたので、ただいまAPIで対応中です。完成したら完了にしようと思っています。

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

自己解決

javascrupt
1function initMap() {
2	map = new google.maps.Map(document.getElementsByClassName('acf-map')[0], {
3	center: {lat: current_lat, lng: current_lng} ,
4	zoom: 15
5	});
6
7    	// InfoWindowオブジェクト
8	var infowindow = new google.maps.InfoWindow();
9//	var markars = new Array();
10	for (var i = 0; i < data.length; i++) {
11		markerLatLng = {lat: +data[i]['lat'], lng: +data[i]['lng']};
12
13		icon_url = '';
14		var iZIndex;
15
16		if ((current_lat == +data[i]['lat']) && (current_lng == +data[i]['lng'])) {
17			icon_url = '/wp-content/uploads/2019/02/BZ_map_pin_red.png';
18			iZIndex = data.length;
19		}else {
20			icon_url = '/wp-content/uploads/2019/02/BZ_map_pin_blue.png';
21			iZIndex = i;
22		}
23
24
25		marker = new google.maps.Marker({
26		position: markerLatLng,
27		icon: { url: icon_url },
28		zIndex: iZIndex,
29		map: map
30		});
31
32	        // マーカクリック時
33		marker.content = "<a href='"+ data[i]['url']+"' target='_top'>"+data[i]['name']+"</a>";
34	        google.maps.event.addListener(marker, 'click', function (e) {
35	            infowindow.setContent(this.content);
36	            infowindow.open(map, this);
37	        });
38//		markars.push(marker);
39	}
40}