小粋空間  -  a cheap joke and a play on words site

Google Maps API v3で表示した地図にマーカーを表示する

Google Maps API v3で表示した地図にマーカーを表示する方法を紹介します。

１．はじめに

「Google Maps API v3を使ってウェブサイトやブログに地図を表示する」では地図を表示するサンプルコードを紹介しました。

サンプルコード

<script>
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('map');
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.689779, 139.700381),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
});
</script>

本エントリーでは、サンプルコードを使ってここではマーカーの基本的な表示方法および、マーカー表示の主なオプションパラメータについて解説します。

２．マーカーを表示する

マーカーを表示するには、サンプルコードに赤色で示す4行を追加します。

<script>
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('map');
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.689779, 139.700381),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
 
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
    });
});
</script>

追加したコードですが、まずgoogle.maps.Marker()を使って、マーカーオブジェクトを作成します。

    var marker = new google.maps.Marker({
        :
    });

作成時のパラメータとしてmapとpositionを指定します。

        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),

mapはマーカーを表示させたいmapオブジェクト、positionはマーカーを表示させたい緯度・経度を指定します。この2つのパラメータは必須と思われます。

赤色の部分は次のように分けて書くことも可能です。

<script>
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('map');
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.689779, 139.700381),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
 
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(35.693872, 139.701132));
    marker.setMap(map);
});
</script>

やっていることは最初のコードと同じです。

３．マーカーにツールチップを表示する

ツールチップを設定すれば、マーカーをポイントしたときにツールチップを表示してくれます。

マーカーにツールチップを表示するには、titleパラメータを追加します。

…前略…
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
        title: 'コンビニ'
    });
…後略…

setTitle()でも同様のことが行えます。

…前略…
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
    });
    marker.setTitle('コンビニ');
…後略…

４．マーカーをドラッグできるようにする

デフォルトではマーカーをドラッグできませんが、マーカー付近の地図を確認したいときにマーカーが邪魔な場合、ドラッグできるようにしておくと便利です。

マーカーをドラッグできるようにするには、draggableパラメータを追加します。

…前略…
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
        draggable: true
    });
…後略…

setDraggable()でも同様のことが行えます。

…前略…
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
    });
    marker.setDraggable(true);
…後略…

なお、ドラッグしたときにマーカーの下に表示される十字の表示・非表示を制御するには、次の2つのオプションraiseOnDrag/crossOnDragのいずれかを設定します（デフォルトは表示）。

十字を表示

• raiseOnDrag: false
• crossOnDrag: true

十字を非表示

• raiseOnDrag: true
• crossOnDrag: false

５．独自マーカーを表示する

マーカーには独自画像を利用することができます。

マーカーに独自画像を表示するには、iconパラメータを追加します。影を追加するにはshadowパラメータを追加します（注：shadowの動作は未確認です）。

…前略…
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
        icon: 画像のURL,
        shadow: 画像のURL
    });
…後略…

setIcon()およびsetShadow()でも同様のことが行えます。

…前略…
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(35.693872, 139.701132),
    });
    marker.setIcon(画像のURL);
    marker.setShadow(画像のURL);
…後略…

ここでは以下のページのマーカーを使わせて頂きました。ありがとうございました。

アイコンとマーカーのサンプル一覧表（影付き）／Google Maps API　 | WordPressにGoogle Maps API V3！

６．参考サイト

参考サイトは以下です。ありがとうございました。

google.maps.MarkerOptions object specification