よみがえったGoogleマップ APIキーを取得してみた!

GPSログ

GPSログを利用して、自転車や街道歩きのコースをGoogleマップ上に描いて公開していた。 しかし最近Googleマップの仕様変更(料金体系の変更)により、地図が表示されなくなってしまった。

利用していた「轍 Wadachi」というフリーソフトをバージョンアップして対応したが、残念ながらGoogleマップと決別し、地理院地図とOpenStreetMapだけになってしまった。

さらばGoogleマップ GPSログを利用した地図が表示されなくなった! 
GPSロガーをザックに忍ばせ、自転車や街道歩きを楽しんでいる。 そして取得したGPSログを利用して、上の画像のようにGoogleマッ...

Googleマップの見やすさ、ストリートビューなどの機能には、やはり未練が残る・・・

そこで意を決してGoogleマップのAPIキーなるものの取得に挑戦してみた!

スポンサーリンク

背中を押してくれるコメントが!

Googleマップを使い続けるには、「Google Maps Platform」とか「API Console」などを操作して「APIキー」を取得し、課金情報の登録が必要となるそうだ。

私のような素人には、「Google Maps Platform」とか「API Console」などは、聞いたことも存在すら知らず、自分の知識レベルではハードルが高すぎると諦めた。

しかし私の記事を読んだ”Wangan Walker”さんよりコメントが寄せられた。 やはりGoogleマップの機能は捨てがたく、自分で対応したとのことである。

このコメントに背中を押され、何とかGoogleマップを復活させようと、APIキーの取得に挑戦してみた。

Googleマップ APIキーの取得作業

まずはネット上にある「APIキー」の取得手順を記したサイトで、大まかな作業手順を研究する。

理解できた大まかな手順は

1. APIキーを取得。

2. APIキーに紐づく課金情報の登録。

3. HTTPリファラーの設定。

4. アクセス数を無料割当量に制限を設定。

全体の流れをざっくりと把握し、再度最初からネットを参照しながら、Google Maps PlatformをアクセスしてAPIキーの取得と設定作業を進めた。

作業は30分程度で終り、何となく上手くいったような気がした。 画面キャプチャーを取ながら作業したので、そのうちに「素人でもできるAPIキーの取得」とでも題して、別途記事にまとめてみよう。

APIキーをJava Scriptに埋め込む

「轍 Wadachi」で作成したGoogleマップのHTMLをメモ帳で開き、HeadセクションにあるJavaScriptの1行に、取得したAPIキーを埋め込んでみた。

もちろん これは「轍 Wadachi」のHP内に書かれている、APIキー取得後の対処方法である。 JavaScriptは全く知らないので、ただ言われるがままに操作・・・

APIキーを埋め込んだHTMLをサーバーにアップしてみた

JavaScriptにAPIキーを埋め込んだHTMLを、自分のPC つまりローカル上で開くとエラーになる。 これはリファラーとして設定していないので止むを得ないようだ。

そこで とにかく修正済みのHTMLをサーバーにアップしてアクセスしてみた。

すると見事にGoogleマップが表示され、思わずニンマリ!!

OpenStreetMapとGoogleマップを見比べる

ではOpenStreetMapとGoogleマップを見比べてみよう。

上がOpenStreetMapで、下がGoogleマップである。 Googleマップのほうが見やすいことは、一目瞭然である。

またGooglマップでも、地理院地図やOpenStreetMapへの切換えが可能である。


GPSログ
GPSログ

OpenStreetMapの地図サンプルはこちら → OpenStreetMapサンプル

Googleマップの地図サンプルはこちら  → Googleマップサンプル

「轍 Wadachi」を利用してGoogleマップを継続して使用するには、従来の作業ステップにもうひと手間増えた。 更に最終的なGoogleマップでの表示確認も、いちいちサーバーにアップしてからでないと確認できない。

ローカルで表示確認を行うには、Wordpressの開発環境を利用すれば可能なようだが、この辺りは今後の研究課題として残った。


一度は諦めたGoogleマップだが、これで何とか継続して使うことができそうである。 既にアップしてある地図を数えると、30~40個ぐらいある。 コツコツと移行していこう。

それにしてもコメントを頂いたWangan Walkerさんには、いろいろとお世話になりました。 この場をお借りしてお礼を申し上げます。


スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です