Google Maps Platformで地図を使う（３）

Google Maps Platformの Maps JavaScript APIによる地図のマーカー設定についてご紹介します。

地図を表示する方法は Google Maps Platformで地図を使う（２）を参照してください。

マーカーとは
マーカーの作成
イベントハンドラの追加
実行サンプル

マーカーとは

以下のように地図の真ん中に赤いマーカーが表示されています。今回はマーカーをマウスドラッグした後の動作を設定します。

マーカーの作成

LatLng オブジェクトの作成

マーカーの位置を指定するために LatLngクラスのオブジェクトを作成します。第１引数は緯度、第２引数は経度を指定します。尚、配列形式での指定も可能です。緯度のキー”lat”、経度のキー”lng”にそれぞれ値を指定します。

// LatLngオブジェクトで指定
var markerPos= new google.maps.LatLng(35.68135257803937, 139.76609230041504);
// 配列形式で指定
var markerPos= { lat: 35.68135257803937, lng: 139.76609230041504 };

Markerオブジェクトの作成

マーカーを表示させるために Markerクラスのオブジェクトを作成します。コンストラクタの引数にパラメータを指定します。

    var marker = new google.maps.Marker({
        position  : markerPos,
        draggable : true,
        map       : map,
        title     : "マーカー"
    });

各パラメータの内容は以下のとおりです。

position	マーカーの位置（LatLngクラスオブジェクト）
draggable	マーカーがドラッグできる(true)／できない（false）
map	マーカーを表示する地図（Mapクラスオブジェクト）
title	マーカーにロールオーバーしたときに表示されるテキスト

他のパラメータについては MarkerOptions interfaceを参照してください。

イベントハンドラの追加

マーカーにマウスドラッグ終了後の動作を追加するには addListener関数を使用します。
第１引数に Markerオブジェクト、第２引数にイベントの種類、第３引数にイベントハンドラ（イベント発生時に実行する関数）を指定します。
以下の例はマーカーのドラッグ終了後にマーカーを中心位置とした地図を表示します。

    google.maps.event.addListener(marker, 'dragend',
    function() {
        var new_point = marker.getPosition(); // マーカーの位置を取得
        map.setCenter(new_point); // 地図中心をマーカー位置に設定
    });

実行サンプル

HTMLファイルのソースコードです。ブラウザで実行すると地図が表示されます。
※ APIキーを記述してください。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIキー&language=ja"></script>
<script type="text/javascript">
function init() {
    // 地図の中心位置
    var position = new google.maps.LatLng(35.68135257803937, 139.76609230041504);

    // Mapオブジェクトの作成
    var map = new google.maps.Map(document.getElementById('google_map'), {
        center       : position,
        mapTypeId    : google.maps.MapTypeId.SATELLITE,
        zoom         : 18,
        zoomControl  : true,
        scaleControl : true,
    });

    // マーカーの位置
    var markerPos = new google.maps.LatLng(35.68135257803937, 139.76609230041504);

    // マーカーの初期化と配置
    var marker = new google.maps.Marker({
        position  : markerPos,
        draggable : true,
        map       : map,
        title     : "マーカー"
    });

    // マーカーにイベントを追加
    google.maps.event.addListener(marker, 'dragend',
        function() {
            var new_point = marker.getPosition(); // マーカーの位置を取得
            map.setCenter(new_point); // 地図中心をマーカー位置に設定
        });
}
</script>
</head>
<body onload="init();">
<div id="google_map" style="width:640px; height:400px;"></div>
</body>
</html>