Google マップのイベント
Google マップイベント
マーカーをクリックして地図をズームします - Google マップに関連付けられたイベント。
マークをクリックすると地図が拡大表示されます
前回の記事で使用した英国ロンドンの地図を引き続き使用します。
ユーザーがマークをクリックしたときに地図をズームする機能を実装します（マークをクリックしたときに地図ズームイベントをバインドします）。
コードは次のとおりです:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスを実行します »
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
addListener() イベントハンドラーを使用してリスナーを登録します行事。このメソッドは、オブジェクトとイベントを使用して、指定されたイベントが発生したときにリッスンします。 関数が呼び出されます。
マーカーをリセット
次のコードでは、イベント ハンドラーをマップに追加することで「center」属性を変更し、center_changed イベントを使用して 3 秒後に中心点をマークします。例 »
インスタンス<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(map,'center_changed',function() {
// 3 seconds after the center of the map has changed, pan back to the marker
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
マークを設定します各マークの情報を開きます ウィンドウユーザーが地図上をクリックするとウィンドウを実行しますユーザーが地図上の特定の場所をクリックすると、placeMarker()関数を使用して指定された場所にマークを配置し、ポップします情報ウィンドウを表示します:
マークを設定します各マークの情報を開きます ウィンドウユーザーが地図上をクリックするとウィンドウを実行しますユーザーが地図上の特定の場所をクリックすると、placeMarker()関数を使用して指定された場所にマークを配置し、ポップします情報ウィンドウを表示します:
例
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>サンプルの実行 »
