Googleマップの描画マネージャのアイコンパネルにクリックリスナーを登録するには？

Question

Googleマップ描画マネージャーの使用に成功しました。今私は1つの問題に直面しています。画像にはポリラインとポリゴンの2つの図形が表示されています。これらのアイコンをクリックするとポリゴンがクリックされたときに警告が表示され、「ポリゴンがクリックされました」というメッセージが表示され、ラインをクリックすると「ポリラインがクリックされました」というメッセージが表示されます。

google.maps.event.addListener(drawingManager, "drawingmode_changed", function() { 
    console.log("drawing mode changed:"+drawingManager.getDrawingMode()); 
}) 

：あなたはDrawingManager変更の描画モードは、（ボタンをクリックすることを行うための一つの方法がある）とき、知っている「drawingmode_changed」イベントのためにDrawingManagerにリスナーを追加したい場合はicons image is here

Answer 1

proof of concept fiddle

コードスニペット：

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    zoom: 8 
 
    }); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.MARKER, 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] 
 
    }, 
 
    markerOptions: { 
 
     icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' 
 
    }, 
 
    circleOptions: { 
 
     fillColor: '#ffff00', 
 
     fillOpacity: 1, 
 
     strokeWeight: 5, 
 
     clickable: false, 
 
     editable: true, 
 
     zIndex: 1 
 
    } 
 
    }); 
 
    google.maps.event.addListener(drawingManager, "drawingmode_changed", function() { 
 
    console.log("drawing mode changed:" + drawingManager.getDrawingMode()); 
 
    }) 
 
    drawingManager.setMap(map); 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>