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

IconMouseEvent

IconMouseEventは、地図やマーカーをクリックした時などのイベントで、コールバック関数に引き渡されるオブジェクトです。MouseEventとほぼ同じですが、POIアイコンなどPlaceIdが紐付けられた場所をクリックした時には、こちらのオブジェクトが渡されます。

プロパティ

プロパティ名説明
latLng

LatLng

クリックした場所の位置座標。

placeId

string

クリックしたのが、Place IDが紐付けられた場所だった場合に、その値が含まれる。

メソッド

メソッド名説明
stop()実行すると、イベントの伝播をそこで止める。JavaScriptのevent.stopPropagation()と同じ。返り値はない。

デモ

地図にクリックイベントを設定しました。クリックするとコールバック関数に引数が渡され、その引数をテキストエリアに表示します。学校や飲食店などのPOIアイコンをクリックしてみて下さい。placeIdというプロパティに、PlaceIdが含まれているはずです。

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" ) ;
var countElement = document.getElementById( "count" ) ;
var argumentElement = document.getElementById( "argument" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 43.06866059334395, 141.35075529999995 ) ,
	zoom: 18 ,
} ) ;

// Event
map.addListener( "click", function ( argument ) {
	try{ argument = typeof argument == "object" ? JSON.stringify( argument ) : argument ; }catch(e){}
	argumentElement.value = argument ;
	console.log( argument ) ;
} ) ;
	</script>
</body>
</html>

デモページを開く

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