Google Maps API で遊んでみよう、第3回。
今回はマーカー（Marker）で色々遊んでみる。
- Google Maps API の使い方（第1回 APIキーの取得）
- Google Maps API の使い方（第2回 検索ボックスの表示）
- Google Maps API の使い方（第3回 マーカー操作あれこれ）
やってみること
基本的な表示までの流れについては第1回の記事を参照。
マーカーを表示する
まずは基本。
マップの指定した位置にマーカーを表示してみる。
:
<div id="map"></div>
<script>
var map, initPos;
function initMap() {
// 初期マーカー位置（JR大阪駅）
initPos = new google.maps.LatLng(34.702485, 135.495951);
// マップ生成
map = new google.maps.Map(document.getElementById('map'), {
center: initPos,
zoom: 14
});
// マーカー配置
var marker = new google.maps.Marker({
map: map,
position: initPos
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
:
Markerクラスをインスタンス化するだけ。簡単だね。
マーカー画像を変更する
次にマーカーの画像を変更してみる。
表示用に下記の画像を作成した。
ソースコードは以下の通り。
:
<div id="map"></div>
<script>
var map, initPos;
function initMap() {
// 初期マーカー位置（JR大阪駅）
initPos = new google.maps.LatLng(34.702485, 135.495951);
// マップ生成
map = new google.maps.Map(document.getElementById('map'), {
center: initPos,
zoom: 14
});
// マーカー定義
var icon = {
url: 'marker_smile.png',
size: new google.maps.Size(40, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(20, 50),
scaledSize: new google.maps.Size(40, 50)
};
// マーカー配置
var marker = new google.maps.Marker({
map: map,
icon: icon,
position: initPos
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
:
Markerコンストラクタのiconプロパティに、マーカー用のアイコンを指定することができる。
以下、プロパティの解説。
サンプル画像のサイズと合わせて見ると分かりやすい。
| url | 画像のURL |
|---|---|
| size（省略可） | 画像の表示サイズ |
| origin（省略可） | 画像の表示起点 |
| anchor（省略可） | 表示サイズのうちアンカーとなる位置 |
| scaledSize（省略可） | 画像の縮小サイズ |
アイコン画像をそのまま表示する場合には画像URLだけでも指定可能。
例）単純なアイコン指定
var marker = new google.maps.Marker({
map: map,
icon: 'marker_smile.png',
position: initPos
});
クリックしたところにマーカーを表示する
今度はイベントリスナを利用して、マップのクリックした箇所にマーカーを表示してみる。
:
<div id="map"></div>
<script>
var map, initPos;
function initMap() {
// 初期マーカー位置（JR大阪駅）
initPos = new google.maps.LatLng(34.702485, 135.495951);
// マップ生成
map = new google.maps.Map(document.getElementById('map'), {
center: initPos,
zoom: 14
});
// マーカー配置
var marker = new google.maps.Marker({
map: map,
position: initPos
});
// クリックイベントリスナ
map.addListener('click', function mylistener(event) {
var myLatlng = new google.maps.LatLng(event.latLng.lat(),event.latLng.lng());
marker.setPosition(myLatlng);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
:
Mapインスタンスにclickイベントリスナを追加し、引数eventから位置を取得している。
次にMarkerクラスのsetPosition関数を呼び出してマーカー位置を変更する。
マーカーをドラッグさせる
ドラッグ＆ドロップに対応したマーカーを作成してみる。
:
<div id="map"></div>
<script>
var map, initPos;
function initMap() {
// 初期マーカー位置（JR大阪駅）
initPos = new google.maps.LatLng(34.702485, 135.495951);
// マップ生成
map = new google.maps.Map(document.getElementById('map'), {
center: initPos,
zoom: 14
});
// マーカー配置
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: initPos
});
// マーカーのドラッグエンドイベントリスナ
marker.addListener('dragend', function(event) {
// event.latLng.lat()、event.latLng.lng()で位置取得
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
:
マーカーをドラッグできるようにするには、Markerコンストラクタのdraggableプロパティをtrueにすれば良い。
また、ドラッグ先の位置情報を取得したい場合は、dragendイベントのイベントリスナをMarkerインスタンスに追加する。
まとめ
マーカーの基本的な操作を書いてみた。
あとは大体これらの応用で出来ると思う。
