読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 Google Map上にマーカーと吹き出しを設置する

この記事では以下の画面を作成する。

f:id:kosumoro:20160813221222j:plain

地図上にマーカーを設置し、マーカークリック時にインフォウィンドウを表示する処理を書いていく。

https://cosmology233.github.io/sandbox/hatena/2016/08/14/

index.html及びstyles/style.cssは以下の記事のソースを参照。変更なし。

kosumemo.hatenablog.com

scripts/script.js

上記の記事のscripts/script.jsをベースとして書いていく。

function initMap() {
  let container = document.getElementById("googlemap");
  let map = new google.maps.Map(container);
  
  // マーカーの初期化
  let marker = new google.maps.Marker();
  
  map.setOptions({
    "zoom": 13,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
};

まずマーカーの初期化を行う。

new google.maps.Marker() の返り値をマーカー用の変数に代入する。

function initMap() {
  let container = document.getElementById("googlemap");
  let map = new google.maps.Map(container);
  
  // マーカーの初期化
  let marker = new google.maps.Marker();
  
  map.setOptions({
    "zoom": 13,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
  
  // マーカーの設定
  marker.setOptions({
    "map": map,
    "position": {
      "lat": 34.705,
      "lng": 135.498
    }
  });
};

次にマーカーの設定を行う。

マーカーの設定は setOptions メソッドを用いる。最低限 mapposition プロパティの設定が必要である。

map の値には、マーカーを設置するマップオブジェクトを、 position の値にはマーカーを設置する緯度、経度を指定する。

この段階でマップにマーカーが表示される。

f:id:kosumoro:20160813215552j:plain

function initMap() {
  let container = document.getElementById("googlemap");
  let map = new google.maps.Map(container);
  
  // マーカーの初期化
  let marker = new google.maps.Marker();
  
  // インフォウィンドウの初期化
  let infoWindow = new google.maps.InfoWindow();
  
  map.setOptions({
    "zoom": 13,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
  
  // マーカーの設定
  marker.setOptions({
    "map": map,
    "position": {
      "lat": 34.705,
      "lng": 135.498
    }
  });
};

さらに、マーカークリック時にインフォウィンドウを表示する処理を追加する。

インフォウィンドウの初期化はマーカーの時と同様に、インフォウィンドウ用の変数に new google.maps.InfoWindow() の返り値を代入する。

function initMap() {
  let container = document.getElementById("googlemap");
  let map = new google.maps.Map(container);
  
  // マーカーの初期化
  let marker = new google.maps.Marker();
  
  // インフォウィンドウの初期化
  let infoWindow = new google.maps.InfoWindow();
  
  map.setOptions({
    "zoom": 13,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
  
  // マーカーの設定
  marker.setOptions({
    "map": map,
    "position": {
      "lat": 34.705,
      "lng": 135.498
    }
  });
  
  // インフォウィンドウの設定
  infoWindow.setOptions({
    "content": "<h1>梅田駅</h1>"
  });
};

インフォウィンドウ内に表示する内容を setOptions メソッドを使用して設定する。

function initMap() {
  let container = document.getElementById("googlemap");
  let map = new google.maps.Map(container);
  
  // マーカーの初期化
  let marker = new google.maps.Marker();
  
  // インフォウィンドウの初期化
  let infoWindow = new google.maps.InfoWindow();
  
  map.setOptions({
    "zoom": 13,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
  
  // マーカーの設定
  marker.setOptions({
    "map": map,
    "position": {
      "lat": 34.705,
      "lng": 135.498
    }
  });
  
  // インフォウィンドウの設定
  infoWindow.setOptions({
    "content": "<h1>梅田駅</h1>"
  });
  
  // マーカークリック時のイベントの設定
  marker.addListener("click", () => {
    infoWindow.open(map, marker);
  });
};

最後にマーカーをクリックした時にインフォウィンドウが表示されるよう、イベントの設定を行う。

イベントの設定は addListener メソッドを使用する。第一引数にイベント名、第二引数にコールバック関数を指定する。

インフォウィンドウは open メソッドで開くことができる。第一引数に対象マップ、第二引数にアンカー(表示の起点となるもの)を指定する。