Google Mapsでmapのclickイベントが発火しない（circleをクリックしたとき）

Google Maps API v3でmapのクリックイベントリスナーを設定し、希望通りクリックした点の緯度経度を取得できているのですが、map上のCircleをクリックしたときはそのイベントリスナーが呼ばれないようです。このときもクリックされた点の緯度経度を取得したいのですが、どのようにすればいいでしょうか？

↓APIキーだけは伏せてあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<style>
  html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
  div#gmap   { width: 100%; height: 100%; }
</style>

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=（APIキーを入れてください）"></script>

<script type="text/javascript">
  $(function() {
    var latlng = new google.maps.LatLng( 35.792621 , 139.806513 );

    var map = new google.maps.Map(document.getElementById("gmap"), {
      zoom: 15 , // ズーム値
      center: latlng , // 中心座標 [latlng]
    }) ;

    var circle = new google.maps.Circle({
      center: latlng,       // 中心点(google.maps.LatLng)
      fillColor: '#ff0000',   // 塗りつぶし色
      fillOpacity: 0.25,       // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
      map: map,             // 表示させる地図（google.maps.Map）
      radius: 100,          // 半径（ｍ）
      strokeColor: '#ff0000', // 外周色 
      strokeOpacity: 1,       // 外周透過度（0: 透明 ⇔ 1:不透明）
      strokeWeight: 1         // 外周太さ（ピクセル）
    });

    map.addListener('click', function(e) {
      var latlng = e.latLng;
      console.log(latlng.lat(), latlng.lng());
    });
  });
</script>
</head>
<body>
  <div id="gmap"></div>
</body>
</html>

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

回答1件

ベストアンサー

clickable: false をCircleクラスのオプションに設定してみてはいかがでしょう。

【clickable - Circleクラスのオプション | Google Maps JavaScript API v3 日本語リファレンス】
https://syncer.jp/google-maps-javascript-api-matome/circle/option/clickable/

追記：

【click - Circleクラスのイベント | Google Maps JavaScript API v3 日本語リファレンス】
https://syncer.jp/google-maps-javascript-api-matome/circle/event/click/

投稿2016/07/28 11:05

編集2016/07/28 11:18

kei344

総合スコア69400

vc3000

2016/07/28 11:14

ありがとうございます。確かに希望通り緯度経度が表示されるようになりました。ちなみに、`clickable: true`のままで実現することはできますでしょうか？（circleに対するイベントリスナーとmapに対するイベントリスナーが両方呼ばれる事になるでしょうか）

kei344

2016/07/28 11:22

> `clickable: true`のまま circleにもクリックイベントを付与すれば座標を取れますよ。 map.addListener('click', function(e) {/*略*/}); circle.addListener('click', function(e) {/*略*/}); // ←同じ関数を割り当てる

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