googleマップにイベント登録、およびマーカーを表示させる方法です。
●マーカーを表示
・画面クリックでマーカーを表示、もう一度マーカーをクリックするとマーカーが消えます。
SAMPLE
<script type="text/javascript">
/**
地図をクリックするとマーカーが表示されます。
マーカーをクリックするとそのマーカーを削除します。
*/
onload = function() {
var myOptions = {
//倍率5倍
zoom: 16,
//北緯、東経
center: new google.maps.LatLng(34.809454, 135.532331),
//マップスタイルは、ロードマップ
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
//表示枠を指定
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//地図上でクリックされた位置にマーカー作成
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
title: '新しいアイコン'
});
marker.setMap(map);
//マーカーをクリックしたら削除
google.maps.event.addListener(marker, 'click', function() {
marker.setMap(null);
});
});
}
</script>
1.マップ上でクリックイベントを登録しています。クリックされた位置にマーカーを表示させています。
2.同時に｢クリックされたらマーカーを削除」も登録します。
●オリジナル画像を表示
独自のオリジナルマーカーも表示可能です。
SAMPLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>【Javascirpt講座】Google Map(オーバーレイ(単純なアイコン))</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/**
地図をクリックするとマーカーが表示されます。
マーカーをクリックするとそのマーカーを削除します。
*/
onload = function() {
var myOptions = {
//倍率5倍
zoom: 16,
//北緯、東経
center: new google.maps.LatLng(34.809454, 135.532331),
//マップスタイルは、ロードマップ
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
//表示枠を指定
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//地図上でクリックされた位置にマーカー作成
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
title: '新しいアイコン',
icon:'./img/ecbzns003blue_030.png'
});
marker.setMap(map);
//マーカーをクリックしたら削除
google.maps.event.addListener(marker, 'click', function() {
marker.setMap(null);
});
});
}
</script>
</head>
<body>
<!-- Google Mapを表示するための枠 -->
<div id="map_canvas" style="width:500px;height:400px;"></div>
</body>
</html>
※参考文献
Google Maps JavaScript API V3 のイベント - Google Maps API — Google DevelopersPR
