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

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

新規登録して質問してみよう
ただいま回答率
85.48%

Q&A

解決済

1回答

786閲覧

MarkerClustererによってクラスタ化したマーカーの情報ウィンドウを表示したい

michir

総合スコア12

0グッド

0クリップ

投稿2022/04/11 12:30

MarkerClustererによってクラスタ化したマーカーをタップ又はマウスオーバーにした場合に、情報ウィンドウを表示するようにしたいのですが、方法がわからないため、アドバイスを頂けると大変助かります。

現状のコードは、以下の通りです。

javascript

1var lat,lng; 2 3var map = new google.maps.Map( 4document.getElementById("gmaps"),{ 5zoom : 10, 6center : new google.maps.LatLng(lat, lng), 7mapTypeId : google.maps.MapTypeId.ROADMAP, 8clickableIcons: false 9} 10); 11// マーカーを生成 12var markers = new Array(); 13function is_touch_enabled() { 14 return ( 'ontouchstart' in window ) || 15 ( navigator.maxTouchPoints > 0 ) || 16 ( navigator.msMaxTouchPoints > 0 ); 17} 18if( is_touch_enabled() ) {var act ="click";}else {var act ="mouseover";} 19for(let i=0; i<data.length; i++){ 20 var lat = data[i].lat; 21 var lng = data[i].lng; 22 markers[i] = new google.maps.Marker({ 23 position: new google.maps.LatLng(lat, lng), 24 map: map 25 }); 26 var latlng = new google.maps.LatLng(lat,lng); 27 var infoWindow = new google.maps.InfoWindow();{ 28 google.maps.event.addListener(markers[i], act, function() { 29 infoWindow.setContent('<h3><a href="'+data[i].url+'">'+data[i].title+'</a></h3><p>'+data[i].address+'</p><p><a href="tel:'+data[i].tel+'">'+data[i].tel+'</a></p><p>数:'+data[i].kazu+'名</p><p>取扱い:'+data[i].toriatukai+'</p>'); 30 infoWindow.open(map,markers[i]); 31 }); 32 } 33} 34// 範囲内に収める 35var minX = markers[0].getPosition().lng(); 36var minY = markers[0].getPosition().lat(); 37var maxX = markers[0].getPosition().lng(); 38var maxY = markers[0].getPosition().lat(); 39for(var i=0; i<data.length; i++){ 40 var lt = markers[i].getPosition().lat(); 41 var lg = markers[i].getPosition().lng(); 42 if (lg <= minX){ minX = lg; } if (lg > maxX){ maxX = lg; } 43 if (lt <= minY){ minY = lt; } if (lt > maxY){ maxY = lt; } 44} 45var sw = new google.maps.LatLng(maxY, minX); 46var ne = new google.maps.LatLng(minY, maxX); 47var bounds = new google.maps.LatLngBounds(sw, ne); 48map.fitBounds(bounds); 49var listener = google.maps.event.addListener(map, "idle", function() { 50 if (map.getZoom() > 17) map.setZoom(17); 51 google.maps.event.removeListener(listener); 52}); 53const markerClusterer = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2022/04/12 01:57

質問一覧を拝見しましたが、ほとんどの質問が放置されているようです。 意図してフリーライダーをしているのであるならともかく、自覚がないのでしたら、質問を解決するようにされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

markerclustererplus の方であれば、マウスイベントのサンプルがありました(コード)。

@googlemaps/js-markerclustererplus

投稿2022/04/12 01:52

Lhankor_Mhy

総合スコア36089

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michir

2022/04/18 11:52

お陰様で、無事に解決できました。 大変助かりました。 誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問