MouseEvent
MouseEventは、地図やマーカーをクリックした時などのイベントで、コールバック関数に引数で渡されるオブジェクトです。
プロパティ
プロパティ名 | 説明 |
---|---|
latLng | クリックした場所の位置座標。 |
メソッド
メソッド名 | 説明 |
---|---|
stop() | 実行すると、イベントの伝播をそこで止める。JavaScriptのevent.stopPropagation()と同じ。返り値はない。 |
デモ
地図にクリックイベントを設定しました。クリックするとイベントが発生し、コールバック関数にMouseEventオブジェクトが渡されます。その中身を地図の下のテキストエリアに表示しています。latLngに位置座標が含まれているのを確認しましょう。
var map = new google.maps.Map( {
center: new google.maps.LatLng( 36.56456479573554, 136.66303396224976 ) ,
zoom: 15 ,
} ) ;
// Event
map.addListener( "click", function ( argument ) {
console.log( argument ) ;
} ) ;
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px ;
height: 600px ;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<p><textarea id="argument"></textarea></p>
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
<script>
var mapDiv = document.getElementById( "map-canvas" ) ;
// Map
var map = new google.maps.Map( mapDiv, {
center: new google.maps.LatLng( 36.56456479573554, 136.66303396224976 ) ,
zoom: 18 ,
} ) ;
// Event
var argumentElement = document.getElementById( "argument" ) ;
map.addListener( "click", function ( argument ) {
argumentElement.value = typeof argument == "object" ? JSON.stringify( argument ) : argument ;
console.log( argument ) ;
} ) ;
</script>
</body>
</html>
参考
- Google Maps JavaScript API: MouseEvent
- Googleの公式リファレンス。