UPDATE : 2019/11/16

【WEB制作の基本】Google Map APIの取得から地図の表示、エラーの解消方法まで解説

新人ウェブデザイナーのNNです。新宿って地図を見ていてもイロイロなスポットがあるので面白いですよね。今回はウェブサイト制作に欠かせないGoogleMapの表示方法です。

GoogleMapをウェブページに表示させる方法をGoogle APIの取得から、地図の表示方法、表示エラーの解消法まで解説いたします。

Google Map APIを使って地図を表示させる手順

APIキーの取得など手間がかかることもありますが作業の流れは下記になります。

Google Map APIキーを取得
地図を表示させるJavaScriptをページに設定

Google Maps API キーの取得方法

Googleにログインした状態で、Google Cloud Platformにアクセスします。

ヘッダーメニューの「▼」をクリックします。

「新しいプロジェクト」をクリックします。

プロジェクト名を記入してプロジェクトを「作成」します。

APIを有効にするために「APIとサービス」の「ダッシュボード」に進みます。

「APIとサービスを有効」をクリックします。

プロジェクトに設定するAPIを選択します。「Maps JavaSript API」を選択して有効にします。

メニューの「API」をクリックすると「Map JavaScript API」が有効になっていることを確認できます。

メニューの「APIとサービス」から「認証情報」を選択して、APIキーの取得を進めていきます。

「認証情報を作成」から「APIキー」を選択します。

APIキーが表示されました。APIキーをコピーしておきましょう。

APIが不正に使用されないように「キーを制限」をクリックして、制限設定をおこないます。

「アプリケーションの制限」は「HTTPリファラー」を選択します。
「項目を追加」をクリックしてリファラーの欄にURLを記入します。

記入するURLは、例えば当社の場合は下記のいずれかになります。

https://itti.jp/*
https://*.itti.jp/*
https://www.itti.jp/*

次に、APIの表示回数を制限します。
メニューから「APIサービス」→「ライブラリ」から「Maps JavaScript API」をクリックします。

Map JavaScript APIの「管理」をクリックします。

表示の割当を編集して、いたずらによる表示回数の増加を防ぎます。
数値はアクセス数に合わせて調整してください。

Map loads per day：一日の表示回数
Map loads per 100 seconds：100秒間の表示回数
Map loads per 100 seconds per user：一人のユーザーが100秒間に表示できる回数

以上で設定は完了です。

表示させるJavaScriptによっては「Maps Embed API」や「Geocoding API」「Maps Static API」などのAPIを有効にしないと地図が表示されません。

メニューの「APIサービス」→「ライブラリ」から必要なAPIサービスを有効にするだけです。

GoogleMapをウェブページに表示させる

緯度経度で地図を表示させる方法と、住所を記述して表示させる方法をご紹介します。

緯度経度で地図を表示させる方法

地図を表示させたい箇所に下記を記述します。

サンプル

<script async src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap"></script>
<script>
function initMap() {
var mapPosition = new google.maps.LatLng( 35.6882495,139.6856557 );//緯度経度
var map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 17,//ズーム
center: mapPosition
});
var marker = new google.maps.Marker({
position: mapPosition,
map: map
});
}
</script>
<div id="gmap"></div>

地図のサイズはCSSで記述します。

CSS

#gmap {
width:100%;
height:500px;
}

住所で地図を表示させる方法

住所で地図を表示させるには「Geocoding API」を有効にする必要があります。

サンプル

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap" async></script>
<script type="text/javascript">
var map;
var marker;
var geocoder;
function initMap() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '東京都新宿区西新宿4-29' //住所
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map = new google.maps.Map(document.getElementById('gmap'), {
center: results[0].geometry.location,
zoom: 17 //ズーム
});
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
infoWindow = new google.maps.InfoWindow({
content: '<h4>ツールチップのタイトル</h4>'
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
} else {
alert(status);
}
});
}
</script>
<div id="gmap"></div>

Google Mapがエラーとなる場合の対処法

「このページでは Google マップが正しく読み込まれませんでした」とエラー表示される場合は、下記の方法で解消されることがあります。

APIキーの記述、設定が間違っている

APIキーを記述したJavaScriptが間違っていないかを確認してください。
またJavaScriptをGoogleMapのコードより先に読み込ませることで表示されることがあります。

JavaScript

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

APIキー利用の制限設定が間違っている

メニューの「APIとサービス」→「認証情報」で「APIキー」をクリックして制限設定が間違っていないかを確認します。

ウェブサイトに地図を表示させる場合は「HTTPリファラー」で制限するのが一般的です。ウェブサイトのURLに間違いが無いかを確認します。

例えば当社の場合は下記のいずれかになります。

https://itti.jp/*
https://*.itti.jp/*
https://www.itti.jp/*

クレジットカード情報を設定する

GoogleAPIに、クレジットカード情報を登録することでエラーが解消されることがあります。正しく設定しているのにエラーとなる場合は、クレジットカード情報の設定でエラーが解消されることが殆どです。

GoogleMapの表示回数が一定数を超えると有料となりますが、設定さえちゃんとおこなっていれば無料のままで利用できます。

REQUEST_DENIEDのエラーが表示される場合

「Maps Embed API」や「Geocoding API」「Maps Static API」などのAPIを有効にすると表示されることがあります。

または、JavaScirptに誤りがあるのでコードをチェックしてみてください。

ITTI STAFF
BLOG

【WEB制作の基本】Google Map APIの取得から地図の表示、エラーの解消方法まで解説

Google Map APIを使って地図を表示させる手順

Google Maps API キーの取得方法