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

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

Posted at May 7,2014 1:55 AM
Tag:[GoogleMaps, Marker]

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

地図にマーカーを表示

1.はじめに

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>

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

2.マーカーを表示する

マーカーを表示するには、サンプルコードに赤色で示す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>

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

3.マーカーにツールチップを表示する

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

マーカーにツールチップを表示するには、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('コンビニ');
…後略…

4.マーカーをドラッグできるようにする

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

マーカーをドラッグできるようにするには、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

5.独自マーカーを表示する

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

マーカーに独自画像を表示するには、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!

6.参考サイト

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

google.maps.MarkerOptions object specification
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)