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

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

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

Q&A

解決済

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

michir
michir

総合スコア12

1回答

0グッド

0クリップ

497閲覧

投稿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'});

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

Lhankor_Mhy

2022/04/12 01:57

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

回答1

1

ベストアンサー

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

@googlemaps/js-markerclustererplus

投稿2022/04/12 01:52

Lhankor_Mhy

総合スコア33631

michir👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

michir

2022/04/18 11:52

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る