Google Maps APIを使って地図を表示させる方法（基本編）

ここでは、「Google Maps API」を使った地図の表示方法の基礎を詳しく見ていきたいと思います。
「Google Maps API」を利用するには、APIキーを取得している必要がありますので、準備がまだの方ははじめに下記をご覧ください。

2018.07.26

Google Maps APIのAPIキーを取得する方法

ここでは、Google Maps APIでサイトに地図を表示させる準備としてAPIキーを取得する方法について見ていきます。 APIキーの取得方法まず、Googleのアカウントをお持ちでない方はアカウントを作成してください。 Googleアカウン...

コンテンツ [hide]

基本的な地図の表示方法

ここでは、とりあえず地図を表示させる方法とその仕組みについてお話します。「Google Maps API」で地図を表示させるには下記の４つのソースコードが必要になります。

地図を表示するためのdiv要素（id属性を付けた空div）
地図のサイズを指定するスタイルシート
Google Maps JavaScript APIのライブラリ
地図を埋め込むJavaScript

これらのソースコードを一つにまとめた例が下記になります。

HTML

<style>
  #map{
    height: 300px;
  }
</style>
 
<div id="map"></div>
 
<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
<script>
 
  // id属性の指定
  var mapDiv = document.getElementById( "map" ) ;
 
  // 地図のオプション
  var mapOptions = {
    center: new google.maps.LatLng( 35.710063, 139.8107 ) ,
    zoom: 10 ,
  } ;
 
  // Mapクラスの設定
  new google.maps.Map( mapDiv, mapOptions ) ;
 
</script>

上記のソースコードで実際に地図を表示させるとこんな感じになります↓

それでは、順番に仕組みを見ていきます。

地図を表示するためのdiv要素

HTMLで地図を表示させるための枠としてid属性を付けたdiv要素を使います。ここでは単純に「map」というid名を付けたいと思います。

HTML

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

スタイルシートで地図のサイズを指定

空divにはコンテンツがないので高さが０になってしまうので、スタイルシートでサイズを指定しましょう。ここでは、height: 300px;で指定します。

横幅についてはdiv要素は初期値が100%なので、必要に応じて設定すれば大丈夫です。

CSS

#map{
  height: 300px;
}

Google Maps JavaScript APIのライブラリ読み込み

Google Maps JavaScript APIのライブラリは下記の通りです。

<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>

{APIキー}の部分をまるごと取得したAPIキーと書き換えます。
例えば、APIキーがXXXXXXXXXXだとしたらこうなります。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX"></script>

地図にいろんな機能を追加するためには、上記にパラメータと言われるものを追加する場合もあります。

地図を埋め込むJavaScriptの設定

最後は、JavaScriptで地図の設定を行います。これもまずは最低限必要な基本形から行きます。

HTML

<script>
 
// id属性の指定
var mapDiv = document.getElementById( "map" ) ;
 
// 地図のオプション
var mapOptions = {
    center: new google.maps.LatLng( 35.710063, 139.8107 ) ,
    zoom: 10 ,
} ;
 
// Mapクラスの設定
new google.maps.Map( mapDiv, mapOptions ) ;
 
</script>