今回は番外編で、自由研究をやってみます。
よろしくおねがいします。
Googleマップって便利ですよね。
いろんな情報がデジタルの地図上に載ってて、スマホから、PCからいつでもどこでもアクセスできます。
そんなGoogleマップ、自分の好きなように、けっこうカスタマイズできるんです。
カスタマイズには、「API(エーピーアイ)」というのを使います。
API = Application Programming Interface。
なんのこっちゃ、という感じですが、あるシステムに外部から接続するための開かれた窓。というような意味合いです。
Google MapにもAPIがあって、そのAPIに接続して、ルールに従ってプログラムを書くと、Google Mapを自分仕様にカスタマイズできるんですね。
もちろん、Googleのルールに従って、ではありますが。
今回は、Google MapのAPIを使って、「最寄りの喫茶店」を探すプログラムを作りました。
(「カフェ」ではなく「喫茶店」というのがポイントです)
私の自由研究!!! こちらです!!!!
↓↓↓↓↓
https://cgsc.info/labo/googlemaps/
※閲覧環境により現在地情報がうまく取れないと真っ白になります。
※あと、表示されるまでに少し時間がかかるかもしれません。
・・・・・・・・・・・別に。
すいません。
たまいさんを、沢尻化させてしまいました。
まあ「別に」となってしまうのも無理はありません。
普段からGoogleマップを使い慣れている令和ピープルからすると、なんの変哲もないページです。
でもまあ、私としてはちょっと頑張ったので、いちおう、少しだけ、このページで、APIを使ってやったことを説明させてください。
- マップの表示形式を変更
- マーカーの画像を変更
- マーカーが降ってくるアニメーション
- マーカーをクリックすると、その場所の名称が表示される
- 喫茶店の登録情報をデータベースから取得、表示(Places API)
- ユーザーの位置情報を取得(厳密に言うとこれはGoogle MapのAPIではない)
- ユーザーの現在地にマーカーを立てる
けっこう機能をもたせてるんです。
というわけでGoogle Mapも、こんなふうに、自由に拡張可能です。
ホームページのアクセスのところで、単純にGoogleマップを埋め込むだけだと芸がない。おもしろくない。なんかちょっと変化をつけたい。
そんなときはご相談ください。
けっこういろんなことができます。
あと、喫茶店好きの方は、ぜひこのページをブックマークして、いつでも開けるようにしてみてください。
自分の今いるところから500メートル以内の喫茶店が、可愛いコーヒーカップとなって表示されます。
もう一回リンク貼っときますね。
https://cgsc.info/labo/googlemaps/
※表示されるまでに少し時間がかかるかもしれませんからね!4、5秒お待ちを。
よろしければどうかご感想を!
※コメントは、サイト管理者による承認後、ページに表示されます。
この記事は、感想を受け付けていません