Google Maps API の使い方(第3回 マーカー操作あれこれ)

Google Maps API で遊んでみよう、第3回。

今回はマーカー(Marker)で色々遊んでみる。

やってみること

基本的な表示までの流れについては第1回の記事を参照。

マーカーを表示する

Google Maps API マーカーの使い方01

まずは基本。
マップの指定した位置にマーカーを表示してみる。

 :
<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クラスをインスタンス化するだけ。簡単だね。

マーカー画像を変更する

Google Maps API マーカーの使い方02

次にマーカーの画像を変更してみる。

表示用に下記の画像を作成した。

Google Maps API マーカー表示用アイコン
marker_smile.png (80 x 100)

ソースコードは以下の通り。

 :
<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インスタンスに追加する。

まとめ

マーカーの基本的な操作を書いてみた。
あとは大体これらの応用で出来ると思う。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です