新潟のウェブ制作会社 株式会社キタックCGソリューションセンター

Web担当者のためのTips集

Googleマップあそび

2020年09月09日(水)

PV 740

今回は番外編で、自由研究をやってみます。
よろしくおねがいします。

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秒お待ちを。

Share プリーズ
書き手は私

よろしければどうかご感想を!

※コメントは、サイト管理者による承認後、ページに表示されます。

この記事は、感想を受け付けていません

キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • 佐久間尭