イントロダクション

前回はGoogleMapのAPIを使用する準備を行いました。
早い話が、APIのキーを取得しました。
取得した後に、ちょいと順序が違ってきてしまったので改めて、実装について触れようと思った次第です。

Google Maps JavaScript API

Googleから提供されているAPIドキュメントを見てみると、実装のサンプルがそのまま乗っています。
なので今まで深く触れていませんでした、が！どんな処理なのか今一度見てみようと思います。
上記のリンクより、こちらのリンクはJSFidleというものでHTML, CSS, JSが見れる優れものでした。

そして、上記のリンク先のコード配下になります。(コピペ)

      var map;
function initMap() {
    // Mapの生成処理(HTMLのDIVタグのid="map")
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
}

コードの内容

DIVタグにMapを埋め込みます。そのために使用するコードは下の部分です。

new google.maps.Map(DOMエレメント)

この処理で、DOMエレメント=DIVタグにマップを埋め込みます。(作成します)
そして、第二引数のJSONデータの部分について、これは見ればわかる人はわかるでしょう。(自分はこのようなのを見て理解するのに時間がかかったクチです(笑))

{ center: {lat: -34.397, lng: 150.644}, zoom: 8}

これをつなげると、上のようなコードになります。ちなみに開業しているのでぱっと見が違います。(見やすい)

map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });

このコードで、マップの作成ができたら次は。。。

Marker追加

マーカーの追加をやりたいと思うのが人情。。。(自分だではないと思います。)
そして、マーカーの追加は下のようにやるようです。上記のリンクよりコピペです。

// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}

// The marker, positioned at Uluruの部分から下がマーカー追加処理になります。
１行で終わるのでとてもわかりやすいと思います。Map作成時と同じような形なのでここの説明は割愛します。

InfoWindow追加

そして、マーカーの次は情報ウィンドウが表示したい。。。
これもリンク先にサンプルコードからしてあります。
同様にコピペしました。

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content" >'+
      '<div id="siteNotice"  >'+
      '</div >'+
      '<h1 id="firstHeading" class="firstHeading"    >Uluru</h1    >'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335 km (208 mi) '+
      'south west of the nearest large town, Alice Springs; 450 km '+
      '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

このコードは以下の手順で処理を行っています。

1. ウルル(地球のへそ)の位置(座標)をJSONで作成
2. マップを作成
3. HTMLコンテンツを作成
4. 情報ウィンドウの生成
5. マーカーの作成と情報ウィンドウの追加

こんな処理を行っています。
表示結果はリンク先にありますのでそちらを確認していただきたく思います。ぱっと見だけであれば、下にキャプチャを貼っておきます。

この画面はこちらに本物のサンプルがあります。

こんな感じです。

でわでわ。。。