マッピィ
  1. TOP
  2. Google Maps APIの基本
  3. ページの基本構成

ページの基本構成

マップを表示するまでの工程

Webページの中でGoogle Maps APIを使い地図を表示する場合にHTMLタグにどのような記述が必要か順を追って説明します。

ベースのHTMLとして下記HTML5ページを利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
</head>
<body>
<p>Google Maps APIを使ったサンプル地図。</p>
</body>
</html>

一般的なHTMLページです。

HTMLタグ内でGoogle Maps APIを使用する為には、最初にGoogle Maps　APIを使用するのに必要なGoogle発行のJavaScriptコードを読み込みます。ＡＰＩキーが必要です。下記のように読み込みます。
※HTML5ではbodyタグ内にスクリプトを記述してもかまいません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
</script>
</head>
<body>
<p>Google Maps APIを使ったサンプル地図。</p>
</body>
</html>

次はこのHTMLページをブラウザで表示した際、地図を表示するエリアをdiv要素を使ってbodyタグ内に記述します。このdiv要素（id）に地図が埋め込まれます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
</script>
</head>
<body>
<p>Google Maps APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

上記の場合は、地図のサイズ横500ピクセル、縦300ピクセルのマップの下地が表示されます。

次に地図を表示するために必要な設定をスクリプトに記述します。（座標やズームレベルなどを設定）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API サンプル</title>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
<script>
    function initialize() {
      var latlng = new google.maps.LatLng(35.658704,139.745408);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map
        (document.getElementById("map_canvas"), opts);
    }
</script>
</head>
<body>
<p>Google Maps APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:500px;height:300px"><div>
</body>
</html>

これでinitializeのスクリプトが呼び出された時点で地図は表示されます。

下記のサンプルコードは、記述コードがブラウザに読み込まれた後で実行するようにbody要素のonload属性に呼び出したい関数を指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ページの基本構成</title>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
<script>
    function initialize() {
      var latlng = new google.maps.LatLng(35.658704,139.745408);
      var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map
        (document.getElementById("map_canvas"), opts)
    }
</script>
</head>
<body onload="initialize()">
<p>Google Maps APIを使ったサンプル地図。<br>表示例 東京タワーを座標設定</p>
<div id="map_canvas" style="width:500px;height:300px"><div>
</body>
</html>

ページの読み込みが完了した後に指定した関数（initialize）が呼び出されて地図を表示します。

表示例　東京タワーを座標設定 イメージ

座標設定

 地図サンプルイメージ 
 座標設定 

サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成

Google Maps サンプル　>　ページの基本構成

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

スクリプトの記述

Google Maps APIを利用し、地図上にマーカーや情報ウィンドウなどを追加表示したり、クリックされた時の処理を記述することができます。

<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.658704,139.745408);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map
(document.getElementById("map_canvas"), opts)
}
</script>

JavaScriptを使って記述のルールとして、HTMLページの中にJavaScriptコードを記述する場合、「<」や「&」などの文字を「＆lt」や「＆amp;」のようにエスケープして記述するか、または下記のようにJavaScriptコードをCDATAセクションの中に記述します。

<script>
//<![CDATA[
function initialize() {
  var latlng = new google.maps.LatLng(35.658704,139.745408);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map
(document.getElementById("map_canvas"), opts)
}
//]]>
</script>

スクリプトを外部ファイルとして用意する

HTLM内にスクリプトを全て記述しマップを表示する以外に、スクリプトを外部ファイルとして用意し利用する方法もあります。

必要なコード部分だけを記述したテキストファイルを作成します。
外部ファイル名を任意に付け拡張子は.jsに変更します。

//外部ファイル
function initialize() {
  var latlng = new google.maps.LatLng(35.658704,139.745408);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map
(document.getElementById("map_canvas"), opts)
}

ベースとなるWebページから先スクリプトを外部ファイルを読み込みます。

<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
<script src="外部ファイル名"></script>

JavaScript記述部分が複雑で長くなると既読性が悪くメンテナンスに要する時間がかかりますので、外部ファイルとして分けて構築するとメンテナンスが楽です。

スクリプトを外部ファイルに分けても、HTMLページの中に直接書いた場合と動作は一緒です。
※安定したらJavaScriptを圧縮してHTLM内の記述に変えた方が表示速度の面でメリットがある場合もあります。

callback関数

API を読み込み完了後、initMap という関数を実行させる意味です。

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

callback関数を使用しない場合。API が読み込み完了後、「onLoad」（Webページの読み込み時）で関数が実行されます。

<script
 src="https://maps.googleapis.com/maps/api/js?&key=APIキー">
</script>
<body onload="関数()">

表示例　スクリプトを外部に記述

外部ファイル

 地図サンプルイメージ 
 スクリプトを外部に記述 

サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成

Google Maps サンプル　>　スクリプトを外部ファイルに記述

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

APIのバージョン指定

Google Maps API バージョンのバージョンは 3 「v3」ですが、新機能の追加やバグフィックスなどのために細かいバージョンアップは行われています。（v3.0 ～ v3.39 などのバージョンがあります。） なお、JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。 v3はパソコンと携帯端末（iPhoneやAndroidで地図を高速に表示できるように機能が追加されました）の両方で使える地図アプリケーションのためのソリューションです。

Google側で用意されたAPIを読み込む時に下記ようなコードを指定しライブラリを組み込みます。

<script
 src="https://maps.google.com/maps/api/js?key=APIキー">
</script>
<script src="外部ファイル名"></script>
指定内容指定方法
ウィークリーチャンネル
The weekly channel		「v=weekly」で指定。最新版（週に一度更新）
クオータリーチャンネル
The quarterly channel		「v=quarterly」で指定。安定版（四半期に一度更新）
バージョン番号での指定
The weekly channel		「v=3.nn」で指定。旧バージョンを指定する場合

バージョンを指定する場合は「v」パラメータを使って指定します。

<script
 src="https://maps.google.com/maps/api/js?v=3.0&key=APIキー">
</script>
<script type="text/javascript">
<script src="外部ファイル名"></script>

バージョンを指定しない場合の初期値は、「weekly channel」が適用されます。

「premium plan」を利用していて、バージョンを指定しない場合の初期値は、「quarterly channel」です。

ページトップ