mojigumi 
GoogleMapをWebサイトに表示させたい時に使っていた Google Maps API の使い方が色々変更されていてちゃんと表示されないので、あらためて調べてまとめた2021年完全版です。
ステップ概要
- Google Cloud Platform（GCP）への登録（最初だけ。ここは過去 Google Maps API と呼ばれていた）
- お支払いページでクレカ登録（限度以上のアクセスがあると請求されるが、企業案内サイト程度ならまずない）
- Map表示に必要な APIを有効化し、API認証コードを取得する
- HTMLにAPI認証コードを含んだScriptをペースト
- HTMLファイルをサーバーにアップ（オンラインであること。ローカルNG）
- ブラウザでアクセスして、MAPが表示されればほぼ完成。あとはCSSとHTMLなど分解して自由にスタイリング。
- 経度、緯度、ズーム、センターポジション、等微調整
スポンサードリンク
１）Google Cloud Platform への登録
２）お支払い
- サイドバー「メニュー > お支払い」にある。
- クレカ情報や三桁の暗証番号を入力
- 電話番号入力は携帯番号を入れ、スマホに認証コードが届き入力
３）APIコード取得
- ホーム（サイドバー） > ダッシュボード > APIとサービス > ライブラリ
- APIを有効にする
- 検索フォームに「Maps Static Maps API」と入力し選択、有効化
- 検索フォームに「Maps JavaScript API」と入力し選択、有効化
- 検索フォームに「Maps Embet API」と入力し選択、有効化
- サイドバー > 認証情報
- 「+認証情報を作成」> 「APIキー」選択
- APIコードをコピー
- APIに名前をつける（任意）
- 「アプリケーション制限タブ」でリファラー（API使用を許可するURL）を入力。
- API制限でMap関連API選び保存（面倒ならAPI制限はしなくてOK）
- ⚠️マークがなければ5分で反映
API有効化が必要なもの
有効化が必要なAPIライブラリは「Google Static Map」だけでは不十分らしく、最低でも以下の2点が必要。
✅Google Static Map
✅Google JavaScript API
地図が表示されずエラーになる場合
次の項目を確認すること。
✅ホーム（サイドバー） > ダッシュボード> APIとサービス > OAuth同意画面 > 公開ステータス > 「公開」になっているか確認。
４）HTMLにAPIコードをペースト
headコード（2018年以降は不要か？）
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true_or_false">
body最後部コード
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API</title>
<style>
#Map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<!--HTMLに表示 -->
<div id=Map></div>
<!--Google Maps API -->
<script>
function initMap() {
var mymark = {lat: 35.67241, lng: 139.48073}; // 目的地
var park1 = {lat: 35.67295, lng: 139.48122}; // パーキング1
var park2 = {lat: 35.67122, lng: 139.48}; // パーキング2
var park3 = {lat: 35.67017, lng: 139.47816}; // パーキング3
var mycenter = {lat: 35.6716, lng: 139.4797}; // センターポジション
var map = new google.maps.Map(document.getElementById('Map'), {
zoom: 17, // ズーム値
center: mycenter,
scrollwheel: false // スクロールの有無
});
var marker = new google.maps.Marker({
position: mymark,
map: map,
animation: google.maps.Animation.DROP // ドロップアニメの有無
});
// カスタムマーカーは下記コメント参照
// var markerImg1 = {url: 'http://www.moranbong.tokyo/images/icons/icon_parking.png'}; // カスタムマーカーの画像ファイルを指定
// icon: markerImg1 // カスタムマーカーの画像呼び出し
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; // マーカーの画像ファイルを指定
var marker = new google.maps.Marker({
position: park1,
map: map,
icon: iconBase + 'parking_lot_maps.png' // マーカーの画像呼び出し
});
var marker = new google.maps.Marker({
position: park2,
map: map,
icon: iconBase + 'parking_lot_maps.png' // マーカーの画像呼び出し
});
var marker = new google.maps.Marker({
position: park3,
map: map,
icon: iconBase + 'parking_lot_maps.png' // マーカーの画像呼び出し
});
}
</script>
<!--Google Maps API - CODE -->
<script src="https://maps.googleapis.com/maps/api/js?key=あなたのGoogleMapsAPIコードをここに&amp;amp;amp;callback=initMap" async defer></script>
</body>
</html>
以降のステップはは任意カスタマイズで
緯度、経度などは任意に入力。
2018年以前の古い案内はこちら
www.mojigumi.comスポンサードリンク