記事の詳細

食べ歩きの感想やレビューを書いているブログで近所のお店が書かれていると、ついついお店を調べたりしちゃいますよね。
そんな時に、ブログの記事内にお店への地図と公式サイトへのリンクがまとまっていたら非常に便利なのになぁ とか思ったりしました。

ということで、今回は「JavaScriptとグーグルマップを組み合わせてコメントやリンクを設定したオリジナルマップを表示する方法」に関して記載します!

今回の記事を読むことで、下記のようなグーグルマップを表示することができるようになります。
グーグルマップのピンクリックでコメント表示

※弊社では関連記事として下記のような記事も書いています。

3分でプロット・マッピング!エクセル顧客住所をGoogleマップの地図上に無料表示する
いいね!が300を超えそうです。ありがとうございます!「地図 プロット」「地図 マッピング」「グーグルマップ プロット」などのキーワードで多くの方にご覧いただい...

自社の顧客を地図にプロットしマーケティング、営業管理等に役立てたいという企業様からのお問い合わせが増えております。

  • ピンを立てたところに営業担当を表示可能か?→可能です!
  • URLもついでに表示したいのですが?→可能です!
  • 項目が増えても大丈夫ですか?→大丈夫です!

などなど、個別サポートいたします!(※サポート内容によっては費用が発生する場合があります。)
お気軽にお問い合わせください。

contact-bana

 

GoogleMapsのAPIキーを取得する

JavaScriptを使用してグーグルマップに何かしらの処理をする際には、APIキーが必要となります。
そのため、まず初めにAPIキーの取得を行いましょう。

下記の記事を参考にしてAPIキーを取得して下さい。
Google Maps APIを使って、サイト上に地図を表示するまでの流れ

HTMLタグとJavaScriptのコードを設置する

今回は例として、相模原市の横山台周辺のラーメン店二点にピンを立てて、ピンをクリックをした際にコメント、画像、リンクを表示してみます。
実際のコードは下記になります。

※4行目の[API key]には自身のGoogleアカウントで取得したAPI keyを入力してください。

上記のコードは下記記事を参考にして作成しました。
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる

緯度と経度の取得方法

地図のデフォルトの位置や、ピンの位置を設定する際には「緯度」と「経度」の設定が必要になります。
緯度と経度を取得する簡単な方法を二つご紹介します。

緯度と経度を取得できるサイトを利用する

下記のサイトから緯度と経度を取得する事ができます。
Googleマップで緯度・経度を求める

検索入力欄に検索したい場所を入力して、検索ボタンをクリックするだけで緯度と経度が取得できます。
緯度経度の取得

グーグルマップのURLから緯度と経度を取得する

上記検索サイトだけでなく、実際にGoogleMapで検索した際のURLから緯度と経度を取得する事もできます。

例えば「壱発ラーメン 相模原店」をGoogleMapで検索すると下記のようなURLが表示されます。
“https://www.google.co.jp/maps/place/%E5%A3%B1%E7%99%BA%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3+%E7%9B%B8%E6%A8%A1%E5%8E%9F%E5%BA%97/@35.567675,139.3588333,17z/data=!3m1!4b1!4m5!3m4!1s0x6019028344f8deff:0x572e2d084aa078e4!8m2!3d35.567675!4d139.361022″

上記URLの”@35.567675,139.3588333“の部分が緯度と経度になります。

※小数点以下の数値に若干の揺らぎがありますが、気にしないで大丈夫です。

上記のいずれかの方法で取得した緯度と経度を使用することで、自由にマップの位置やピンの場所をカスタマイズすることができます!

ユーザーが求めている情報を掲載するWebサイトを目指しましょう!

いかがでしたか?

グーグルマップをページに表示することで、今まで以上に多くの情報を提供できるようになりますので、ユーザーにとって便利なサイトになりそうですね。

ちょっと話がズレてしまいますが、ふと「何故グーグルさんはグーグルマップをカスタマイズするサービスを提供しているのか?」ということを考えてみました。
おそらくですが、提供する一つの理由としては、各々のサイト(またはページ)で調べ物が完結して欲しいという考えがあるのではないでしょうか。

私は頻繁にYoutubeを見るのですが、Youtubeで何かを見る際には、関連動画に飛ぶことはあっても調べる事はほとんどありません。
おそらくですが、グーグルさんはYoutubeのように調べる行為すらも省いたようなサイトを作って欲しいからこそ、いろいろなサービスを提供しているのではないでしょうか。

Youtubeのように、ユーザーが調べる行為を不要とするWebサイトにしていくためには、Webサイトの管理者が「ユーザーさんは何を求めているか?」を考えながらページを作るしかありません。
非常に難しい事ですが、今後はそういったことを考えて作られたWebサイトが求められるのだと思います。

私もまだまだできていないことなので、ブログの投稿を続けてレベルアップしていきたいです!

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る