Google Maps(グーグルマップ)上にマーカーを設定する方法
Google Maps APIを使ってマップを生成した場合、マップ上にマーカーを設定することができます。
なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。
Contents
Google Maps(グーグルマップ)上にマーカーを設定する方法
まず、以下のマップに3つのマーカーを設定させました。
サンプル
青アイコン位置(アイコンをドラッグしてください) | |
---|---|
緯度 | |
経度 |
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Map</title>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
</script>
<style type="text/css">
#map_canvas {
width: 100%;
height:80%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
var marker1;
var marker2;
var marker3;
var bVisible;
var optMarker2;
function initMap() {
var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
var mapOptions = {
zoom: 16,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// https://developers.google.com/maps/documentation/javascript/markers
marker1= new google.maps.Marker({
position: myLatlng,
title:"1!"
});
marker1.setMap(map);
optMarker2 = {
position: { lat:35.683774,lng: 139.745473 },
animation: google.maps.Animation.BOUNCE,
map:map,
title:"2"
};
marker2 = new google.maps.Marker();
marker2.setOptions(optMarker2);
bVisible = true;
marker3 = new google.maps.Marker({
position: { lat:35.681289,lng: 139.767244 },
icon: {
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
},
draggable: true,
map:map,
title:"3"
});
// マーカーのドロップ(ドラッグ終了)時のイベント
google.maps.event.addListener( marker3, 'drag', function(evt){
// https://developers.google.com/maps/documentation/javascript/reference/map#MapMouseEvent
// 「evt」はMapMouseEvent
// MapMouseEventのプロパティ.latLngが緯度経度。
document.getElementById('lblIdo'). textContent = evt.latLng.lat();
document.getElementById('lblKeido').textContent = evt.latLng.lng();
});
// マーカーのドロップ(ドラッグ終了)時のイベント
google.maps.event.addListener( marker3, 'dragend', function(evt){
// https://developers.google.com/maps/documentation/javascript/reference/map#MapMouseEvent
// 「evt」はMapMouseEvent
// MapMouseEventのプロパティ.latLngが緯度経度。
document.getElementById('lblIdo'). textContent = evt.latLng.lat();
document.getElementById('lblKeido').textContent = evt.latLng.lng();
});
}
function ShowHideMarker2() {
if ( bVisible ) {
marker2.setMap(null);
bVisible = false;
} else {
bVisible = true;
marker2.setMap(map);
marker2.setOptions(optMarker2);
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
<p>
<input type="button" value="アニメアイコンを非表示/表示" onclick="ShowHideMarker2();" />
</p>
<p>
<table>
<tr>
<th colspan="2">青アイコン位置(アイコンをドラッグしてください)</th>
</tr>
<tr>
<th style="text-align:left">緯度</th><td style="text-align:right"><span id="lblIdo"></span></td>
</tr>
<tr>
<th style="text-align:left">経度</th><td style="text-align:right"><span id="lblKeido"></span></td>
</tr>
</table>
</p>
</body>
</html>
デモ
google.maps.Marker
地図上にマーカーを設定するには「google.maps.Marker」オブジェクトを生成します。
オブジェクトを生成する
marker1= new google.maps.Marker({
position: myLatlng,
title:"1!"
});
marker1.setMap(map);
google.maps.Markerをnewして、オプションの「position」に緯度/経度(google.maps.LatLng)を設定し、setMapメソッドを使用し、google.maps.Mapクラスと紐づけば、地図上に、マーカーが表示されます。
アニメーション有マーカー
動きを付けた(アニメーションのある)マーカーも設定できます。
ただ、アニメーションの種類は、跳ねる(BOUNCE)動きと、マーカーが落ちてくる(DROP)の動きの二つです。サンプルでは、BOUNCEを指定してあります。
optMarker2 = {
position: { lat:35.683774,lng: 139.745473 },
animation: google.maps.Animation.BOUNCE,
map:map,
title:"2"
};
marker2 = new google.maps.Marker();
marker2.setOptions(optMarker2);
bVisible = true;
定数 | 動き |
google.maps.Animation.BOUNCE | マーカーが跳ねる |
google.maps.Animation.DROP | 最初にマーカーが落ちてくる |
マーカの非表示→再表示
function ShowHideMarker2() {
if ( bVisible ) {
marker2.setMap(null);
bVisible = false;
} else {
bVisible = true;
marker2.setMap(map);
marker2.setOptions(optMarker2);
}
}
<input type="button" value="アニメアイコンを非表示/表示" onclick="ShowHideMarker2();" />
サンプルの「アニメアイコンを表示/表示」ボタンを押してみてください。
既にマーカーが表示されいてる場合には「setMap(null)」が実行され、アイコンとマップとの紐づけが取れて、マップ上から消えてしまいます。
非表示の状態である場合には、「setMap(map)」が実行されて、再び、マップ上にマーカーが表示されます。
独自アイコンを指定したマーカーの設定
MarkerOptionsのiconにgoogle.maps.Iconの形式で画像のurlを指定すると、独自のアイコンを指定することができます。
東京駅にあるアイコンは青い色のアイコンが『https://maps.google.com/mapfiles/ms/icons/blue-dot.png』通り設定されています。
マーカーのドラッグによる移動
MarkerOptionsのdraggableを「true」に設定すると、マーカーをドラッグで移動させることができます。
marker3 = new google.maps.Marker({
position: { lat:35.681289,lng: 139.767244 },
icon: {
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
},
draggable: true,
map:map,
title:"3"
});
なおかず、ドラッグ中およびドラッグ終了後などのイベントも取得できます。
サンプルではドラッグ中とドラッグ終了後、マーカーの位置を取得し、緯度/経度をラベルに設定しています。
// マーカーのドロップ(ドラッグ終了)時のイベント
google.maps.event.addListener( marker3, 'drag', function(evt){
// 「evt」はMapMouseEvent
// MapMouseEventのプロパティ.latLngが緯度経度。
document.getElementById('lblIdo'). textContent = evt.latLng.lat();
document.getElementById('lblKeido').textContent = evt.latLng.lng();
});
// マーカーのドロップ(ドラッグ終了)時のイベント
google.maps.event.addListener( marker3, 'dragend', function(evt){
// 「evt」はMapMouseEvent
// MapMouseEventのプロパティ.latLngが緯度経度。
document.getElementById('lblIdo'). textContent = evt.latLng.lat();
document.getElementById('lblKeido').textContent = evt.latLng.lng();
});
Google.maps.event.addListenerを使って、青色のマーカーの「drag」イベントと「dragend」イベントを取得します。
イベントが発生すると、引数で、MapMouseEventオブジェクトを取得でき、そこから位置情報が取得できます。
MapMouseEventのプロパティ「latLng」から緯度(lat)と経度(lng)を取得できます。
デモでは、それをラベルに表示させるようにさせてあります。
ご参考にしていただければと思います。
ご参考
関連ページ