Google Map API InfoWindow clickイベントがlatlngを返さない

Question

Googleマップでポリゴンを作成しましたが、ポリゴンをクリックするとインフォウィドウがポップアップ表示されます。コードは次のよう：

google.maps.event.addListener(polygon, 'click', showVolume); 
polygon_infoWindow = new google.maps.InfoWindow; 

showVolume機能では、

function showVolume(event){ 
    var polygon_Name = this.Name; 
    var volume = this.Volume; 
    var pt = event.latlng; 
    var contentString = '<b>Name: </b>' + polygon_Name + '<br>' + '<b>Volume: </b>' + volume + '<br>' + '<b>Clicked Location: </b>' + pt; 

    polygon_infoWindow.setContent(contentString); 
    polygon_infoWindow.open(map); 
    polygon_infoWindow.setPosition(pt); 
} 

機能は、ポリゴンに属する正しい情報を返されました。しかし、event.latlngは未定義として返しました。私は何が間違っているのだろうか。

Answer 1

event.latlngが存在しない、大文字と小文字が区別されジャバスクリプト、プロパティはevent.latLng

proof of concept fiddle

コードスニペットです：

var geocoder; 
 
var map; 
 
var polygon_infoWindow; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var polygon = new google.maps.Polygon({ 
 
    map: map, 
 
    Name: "Fred", 
 
    Volume: 1000, 
 
    path: [{ 
 
     lat: 37.4419, 
 
     lng: -122.1419 
 
    }, { 
 
     lat: 37.42, 
 
     lng: -122.16 
 
    }, { 
 
     lat: 37.4419, 
 
     lng: -122.1819 
 
    }] 
 
    }); 
 
    google.maps.event.addListener(polygon, 'click', showVolume); 
 
    polygon_infoWindow = new google.maps.InfoWindow; 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function showVolume(event) { 
 
    var polygon_Name = this.Name; 
 
    var volume = this.Volume; 
 
    var pt = event.latLng; 
 
    var contentString = '<b>Name: </b>' + polygon_Name + '<br>' + '<b>Volume: </b>' + volume + '<br>' + '<b>Clicked Location: </b>' + pt; 
 

 
    polygon_infoWindow.setContent(contentString); 
 
    polygon_infoWindow.setPosition(pt); 
 
    polygon_infoWindow.open(map); 
 

 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>