SYNCERのロゴ
アイキャッチ画像

MouseEvent

MouseEventは、地図やマーカーをクリックした時などのイベントで、コールバック関数に引数で渡されるオブジェクトです。

プロパティ

プロパティ名説明
latLng

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>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2016年2月1日 (月)
コンテンツを公開しました。