1. HOME
  2. フロントエンド
  3. mapを表示してみる - Google maps API -

mapを表示してみる - Google maps API -

フロントエンド

Google maps APIの実相手順のAPIキーの取得から、mapを表示するまでです。

APIキーの取得

Goolge APIsにアクセス。

タイトル横の「▼」から【プロジェクトを作成】を選択



プロジェクト名を入力して、【作成】をクリック。



作成後、左メニューの【ライブラリ】から【Google Maps JavaScript API】を選択する。



【Google Maps JavaScript API】を有効にする。



有効にしたら、認証情報の作成に進みます。
左メニューの【認証情報】から【認証情報の作成】をクリック。



いろいろ選択肢がでてくると思いますが、一番下の【ウィザードで選択】をクリック。



使用するAPI : Google Maps JavaScript API
APIを呼び出す場所 : ウェブブラウザ(Javascript)
をそれぞれ選択する。



名前の変更、とリファラーの設定をする。
リファラーは特定のものまたは、【*】をつけることでワイルドカードにすることができます。
例 : //kigiroku.com/*



【APIキーを作成する】をクリックすると、APIキーが表示されるのでコピーしておきます。
(※あとでテンプレートに記載します。)


テンプレートの記述

styleの指定、divの記述、Javascriptの記述をします。

mapの描画のdiv

空のdivに[ID(classでも可)]を指定します。

<div id="map"></div>

styleの指定

先ほど書いた空divとhtmlとbodyに高さを作ります。

html,body,#map {
	height: 100%;
}

Javascriptの記述

map用のスクリプトを閉じbodyタグの直前に書いていきます。
まず、閉じbodyタグの直前にGoogle maps APIを読み込みます。

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
</script>

APIキー作成時にコピーしたAPIキーを【key=】のあとから【&callback】の前までに記載します。
【callback=】のあとは任意の関数を指定します。今回はinitMapとしました。

Google maps APIを読み込みの上に今度はmapを描画するスクリプトを記述します。

var map;
    function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.170981, lng: 136.881556} ,
        zoom: 15
   });
}

上のソースでは、名古屋駅を中心として表示しています。

center: {lat: 緯度, lng: 経度}

centerの部分を変えると地図の中心地を指定できます。
(lat → 緯度 lng → 経度)

全体のソース

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Google maps API</title>
    <style type="text/css">
		  html,body,#map {
  			height: 100%;
  		}
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script type="text/javascript">

    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.170981, lng: 136.881556} ,
        zoom: 15
      });
    }

    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmu4llqTlRI1FvnG5XneJzeJtK5dJpnEg&callback=initMap">
    </script>
  </body>
</html>

あとがき

以上がmap描画までの手順です。
次回以降は案内や、現在地の表示、ピンを立てたり、ピンの変更などいろいろなことを書いていこうかな〜と思っています。
最初は慣れなくて難しいところもあったけど、実際やってみると楽しかったのがGoogle maps APIでした。
今回の記事までのデモはこちらです。


API

この記事を読んだ方におすすめ