［Google Maps Platform］①
まず、Google Maps Static APIについて理解していこうと思います。
下記参照
次に下記参照
どういうレスポンスが返ってくるかを簡単に確認する方法としては、
HTMLファイルを作成し、imgタグに埋め込むのがよいようです。
この際、JavaScriptは不要です。
まず、空のHTMLファイルを用意します。ちなみに、Visual Studio Codeを使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<!--下に要素を追加-->
</body>
</html>
Hello.htmlとして保存
これをインターネットブラウザで開くと表示されます。
<!--下に要素を追加-->の下に<img>タグを入れます。
このHTML.htmlと同じファイル内に、sample.pngが入れて、
<img src ="sample.png">と記載すると、ブラウザで開くとこの画像が表示されます。
ここで注意なのは、imgタグは、<img></img>や<img/>の形式ではなく、
<img>であることです。
スクリーンショットはPNGファイルで保存されるので手っ取り早く試せます。
Sample.pngとは別のファイル内にHTMLファイルをおいているときは、
<img src ="C:\Javascript\javascript\sample.png">
などと、絶対的なパスを使って、記載します。\ と￥は、同じ意味です。コマンドプロンプトでは、￥であらわされてますが、HTMLやプログラミングでは、\で書くことが多いです。キーボードで￥を押しても \ と表示されることもあります。
imgタグの使い方がHTML初心者でもわかる！3つのよく…｜Udemy メディア
How to add a simple map to your web page (Easy Mode) - YouTube
このYoutube動画では、前半にGoogle Maps Static APIについて説明してあります。
サンプルとして、自分の自宅付近を調べてみましょう。
なにも設定していなければ、Googleアカウント管理を開くと、住所のところに、緯度経度をあらわすものが、なぜか登録されてます。これを使いましょう。
どこをあらわすかは、これをコピーして、Google Mapで見ればわかります。
これを使って、下記HP参考にしながらやっていきます。
APIキー取得についてですが、いろいろな方法があるようですが、その一つの方法を挙げます。
APIマネージャーを開きます。
まず、プロジェクトを新規作成あるいは、あらかじめ作成したものを選択します。
次に、APIとサービスの項目にある、APIとサービスの有効化を押すと、いろいろなGoogle Cloud API一覧が出ますので、そこから使用したいAPIを選び、有効化ボタンを押します。
使いたいAPIを有効にすると、いくつか記入するフォームがありますが、そこに記載するとAPIキーが発行されました。
このあと、通常はAPIキーの制限を行いますが、今はしないでおきます。
そのAPIキーを下記のように△△△△△△に入れます。
〇〇〇が緯度、◎◎◎が経度です。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<!--下に要素を追加-->
&size=400x200&zoom=15&sensor=false&key= △△△△△△ ">
</body>
</html>
このファイルをインターネットブラウザで開きますと、自宅周辺の地図が表示されました。
