Google Maps Overlay anklickbar

Question

Ich bin neu in Javascript. Wenn ich in einer Map auf ein Overlay klicke, versuche ich es so zu machen, dass eine Funktion aufgerufen wird, die Zugriff auf das angeklickte Overlay hat.

Hier ist mein Code, keine Fehler in der Konsole.

<div style='width: 800px;'> 
    <div id="multi_overlays" style='width: 1000px; height: 600px;'></div> 
</div> 

<script type="text/javascript"> 
    handler = Gmaps.build('Google'); 

    handler.buildMap({ internal: {id: 'multi_overlays'}}, function(){ 

     var circles = handler.addCircles(
     [{ lat: 41.991873, lng: -70.652213, radius: 2000 }], 
     { strokeColor: '#FF0001'} 
    ); 

     var polylines = handler.addPolylines(
      [ 
      [ 
      ] 
     ], 
     { strokeColor: '#FF0000'} 
    ); 


     var polygons = handler.addPolygons(
      [ 
      //ccb_nw 
       [{lat:41.83,lng:-70.44},{lat:41.87,lng:-70.28},{lat:41.77,lng:-70.49},{lat:41.75,lng:-70.19}], 
      //ccb_se 
       [{lat: 41.984198, lng: -70.319776}, {lat: 41.970926, lng: -70.110349},{lat: 41.825776, lng: -70.164594},{lat: 41.803259, lng: -70.222959}], 
      //ccb_sw 
       [{lat: 41.887260, lng: -72.529131}, {lat: 41.920867, lng: -70.335363},{lat: 41.794781, lng: -70.283835},{lat: 41.783006, lng: -70.498755}], 
      ], 
       { strokeColor: '#FF0000'} 
     ); 


     handler.bounds.extendWith(polylines); 
     handler.bounds.extendWith(polygons); 
     handler.bounds.extendWith(circles); 
     handler.fitMapToBounds(); 

     markers = handler.addMarkers([{"lat":42.30010009999999,"lng":-70.2994764,"infowindow":"Bass bite is picking up"},{"lat":41.6820897,"lng":-69.95976639999999,"infowindow":"Tuna non existent"},{"lat":42.0417525,"lng":-70.6722767,"infowindow":"good trip"},{"lat":42.072454,"lng":-70.206835,"infowindow":"On fire"}]); 
     handler.bounds.extendWith(markers); 
     handler.fitMapToBounds(); 


    }); 
</script> 

Ich habe versucht, für Klicks Google Maps addListener Ereignis mit hören:

handler.addListener('click', function(event){ 
    alert('the map was clicked'); 
}); 

Der obige Code funktioniert nicht. Die Überlagerungen erscheinen, aber nichts passiert, wenn sie angeklickt werden. Ich denke, es könnte etwas mit Scheiben zu tun hat:

https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

Aber jedes Mal, wenn ich versuche, eine overlayMouseTarget hinzufügen es mir das Objekt erzählt nicht existiert. Ich bin sehr verloren. Wie kann ich ein Overlay anklickbar machen?

Answer 1

Sie müssen einen Listener mithilfe der Variablen erstellen, die Sie für den von Ihnen verwendeten Marker/Kreis festgelegt haben. Dies soll Ihnen helfen:

google.maps.event.addListener(<variable>, 'click', function (event) { 
     handleClick(event); // Your function here 
}); 

Ich habe ein größeres Beispiel hier: https://snippetbox.xyz/9eb54a2a1f52dc1f5d41/