Google は、公式サイトで API キーをコードに直接埋め込まないでくださいと言っている割には、[公式サンプル]のコーディングが以下の様になっていて、堂々とHTMLの中にYOUR_API_KEYが登場している。
これでwebページ作ったら世界中にAPI キーを公開してしまうことになる。まるで、堂々とフリチンで公道を歩いている様な状態。公式サンプルは裸の王様か？
#!/usr/bin/python
# -*- coding: utf-8 -*-
importrequestsimportosurl='https://maps.googleapis.com/maps/api/js'# 公式サンプルの HTML が src= で読んでたurl
key=os.environ['GOOGLE_MAPS_API_KEY']# 環境変数に入っている APIキーを取り出す
mysrc=url+"?key="+key# url に APIキーを連結する
response=requests.get(mysrc)# google マップのサイトにアクセスして src を持ってくる
print("'Content-Type': 'text/javascript; charset=UTF-8'")# HTML に返してあげるためのヘッダー
print("")print(response.text)
この部分も皆さんの環境毎に異なる部分なので、ご自分の使える言語で記述してください。
要は、サーバーの環境変数からAPIキーを持ってきて、url 指定して google のサイトから javascript を頂戴するということです。ヘッダーの部分は、'Content-Type': 'text/javascript; charset=UTF-8' にしましょう。
３．javascript の window.onload で CGI を呼ぶ
main.js
functioninitMap(){// 公式サンプルの内容と同じ// Initialize and add the map// The location of Uluruvaruluru={lat:-25.344,lng:131.036};// The map, centered at Uluruvarmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:4,center:uluru});// The marker, positioned at Uluruvarmarker=newgoogle.maps.Marker({position:uluru,map:map});}window.onload=function(){// ページを表示した後に、実行したい処理を書く。ここからが今回のポイント！fetch("/cgi-bin/getapijs.py").then(res=>{// CGI 実行して、結果の TEXT だけを次にパスするreturnres.text();}).then(mytext=>{// 受け取った javascript を EVAL で実行する。eval(mytext);}).then(()=>{// 実行後の処理。公式サンプル HTML が &callback= でコールしていた部分initMap();}).catch(()=>{// お好きなエラー処理をどうぞ});}
<!DOCTYPE html><html><head><style>/* Set the size of the div element that contains the map */#map{height:400px;/* The height is 400 pixels */width:100%;/* The width is the width of the web page */}</style><title>Hello World</title><script src="main.js"></script></head><body><h3>My Google Maps Demo</h3><!--The div element for the map --><divid="map"></div></body></html>
