Googleマップのピンをクリックして複数の関連施設を表示させる方法

締切済

質問者：やっぱり
質問日時：2016/11/11 10:45
回答数：1件

Googleマップのカスタマイズについての質問です。
或るピンをクリックすると、それに関連する施設のピンを点滅させたり、色を変えたり、といったことは可能でしょうか。可能な場合、どのような技術が必要でしょうか。

例として、Googleマップ上にすべてのローソンの位置をピンで表示するとします。
そして、そのうちの1店舗をクリックすると、そのオーナーが経営する他の店舗も点滅を始める、ということです。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2016/11/11 16:12

こんにちは

google社はmapのカスタマイズなどのために、javascriptを利用したAPIを提供しています。
https://developers.google.com/maps/documentation …
実際のスクリプトの書き方についても充実した説明（リファレンス）が用意されています。
https://developers.google.com/maps/documentation …
これらを利用することで、ご質問のような内容は実現可能と思います。

店舗の位置情報や経営者情報はどこかにあるものとして、ごく簡単な要領だけの例を以下に作成してみました。
実際の情報量が多いような場合は、外部から読み込むなどの工夫が必要と思います。
（ご例示のようなgoogleに登録済みの店舗情報等であれば、Google Placesのサービスを利用することでも情報を取得可能と思われますが…）

＞オーナーが経営する他の店舗も点滅を始める～～
点滅をいつやめるのかや、見た目にうるさいので色を変える等にする方が良さそうとも思いましたが、とりあえずご質問の通りに点滅します。（笑）（3回で自動停止）

※ 他にも方法は様々にあると思いますので、あくまでも雰囲気の一例としてのサンプルです。
※ スクリプト部のインデントは全角空白に変えてありますので、半角に。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …

<script type="text/javascript">
function initialize(){
var sData = shopData();

// ** マップを作成 **
var map = new google.maps.Map(document.querySelector("#map"), {zoom:15});

// ** インフォウィンドウを作成 **
var infoWin = new google.maps.InfoWindow({map:map});
infoWin.close();

// ** マーカを作成 **
var bounds = new google.maps.LatLngBounds();
sData.forEach(function(s, i){
　var latlng =　{ lat:s.lat, lng:s.lng };
　var marker = new google.maps.Marker({
　　position: latlng,
　　map: map,
　});
　s.marker = marker;
　bounds = bounds.extend(latlng);

//　マーカークリック時の処理
　marker.index = i;
　google.maps.event.addListener(marker, "click", function(){
　　var ss = sData[ this.index ];
//　　インフォウインドウを表示
　　infoWin.open(map, this);
　　infoWin.setContent(ss.name);
//　　同じオウナーの店を点滅
　　var owner = ss.owner;
　　sData.forEach(function(s){
　　　if(s.owner == owner) blink(s.marker, 6);
　　});
　});
});

map.fitBounds(bounds);

// ** マーカー点滅処理 **
function blink(m, n){
　if(n<1) return;
　m.setVisible( !(--n % 2));
　setTimeout( function(){ blink(m, n); }, 400);
}
}

google.maps.event.addDomListener(window, 'load', initialize);

// ** テスト用店舗データ　**
function shopData(){
return [
{ lat:35.683060650, lng:139.775576591, name:"日本橋一丁目店", owner:"A"},
{ lat:35.678982131, lng:139.773001671, name:"日本橋三丁目店", owner:"A"},
{ lat:35.676480885, lng:139.778312445, name:"八丁堀二丁目店", owner:"B"},
{ lat:35.678494089, lng:139.777883291, name:"茅場町三丁目店", owner:"B"},
{ lat:35.679705474, lng:139.779675007, name:"茅場町駅前店", owner:"B"},
{ lat:35.671260261, lng:139.777657985, name:"入船店", owner:"B" },
{ lat:35.674502492, lng:139.761650562, name:"有楽町一丁目店", owner:"C"},
{ lat:35.680123789, lng:139.762669802, name:"丸の内仲通りビル店", owner:"C"},
{ lat:35.685160832, lng:139.766693115, name:"新大手町ビル店", owner:"C"},
{ lat:35.672105695, lng:139.767905474, name:"銀座三丁目店", owner:"C"},
{ lat:35.669360184, lng:139.756897688, name:"内幸町一丁目店", owner:"A"}
];
}
</script>
</head>

<body>
<div id="map" style="width:800px; height: 600px;"></div>
</body>
</html>