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

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

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

解決済

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

michir
michir

総合スコア12

1回答

0評価

0クリップ

211閲覧

投稿2022/04/11 12:30

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

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

javascript

var lat,lng; var map = new google.maps.Map( document.getElementById("gmaps"),{ zoom : 10, center : new google.maps.LatLng(lat, lng), mapTypeId : google.maps.MapTypeId.ROADMAP, clickableIcons: false } ); // マーカーを生成 var markers = new Array(); function is_touch_enabled() { return ( 'ontouchstart' in window ) || ( navigator.maxTouchPoints > 0 ) || ( navigator.msMaxTouchPoints > 0 ); } if( is_touch_enabled() ) {var act ="click";}else {var act ="mouseover";} for(let i=0; i<data.length; i++){ var lat = data[i].lat; var lng = data[i].lng; markers[i] = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map }); var latlng = new google.maps.LatLng(lat,lng); var infoWindow = new google.maps.InfoWindow();{ google.maps.event.addListener(markers[i], act, function() { 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>'); infoWindow.open(map,markers[i]); }); } } // 範囲内に収める var minX = markers[0].getPosition().lng(); var minY = markers[0].getPosition().lat(); var maxX = markers[0].getPosition().lng(); var maxY = markers[0].getPosition().lat(); for(var i=0; i<data.length; i++){ var lt = markers[i].getPosition().lat(); var lg = markers[i].getPosition().lng(); if (lg <= minX){ minX = lg; } if (lg > maxX){ maxX = lg; } if (lt <= minY){ minY = lt; } if (lt > maxY){ maxY = lt; } } var sw = new google.maps.LatLng(maxY, minX); var ne = new google.maps.LatLng(minY, maxX); var bounds = new google.maps.LatLngBounds(sw, ne); map.fitBounds(bounds); var listener = google.maps.event.addListener(map, "idle", function() { if (map.getZoom() > 17) map.setZoom(17); google.maps.event.removeListener(listener); }); const markerClusterer = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy

2022/04/12 01:57

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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