記事の詳細

こまごまとたくさんいろんなことを更新し続けているGoogleMapさんですが、先日ストリートビューを表示していた箇所でちょっとしたバグが見られました。

まあ基本的なところになりますが、GoogleMapさんの簡単な設置方法はこちら

GoogleMapのデフォルトの「地図を埋め込む」「場所を共有する」を使う場合

もっとカスタマイズして埋め込む場合【「Google マップ」の埋め込み地図をカスタマイズする方法まとめ】

「Google マップ」の埋め込み地図をカスタマイズする方法まとめ

社長のこんな記事も

3分でプロット・マッピング!エクセル顧客住所をGoogleマップの地図上に無料表示する

mymap123分でプロット・マッピング!エクセル顧客住所をGoogleマップの地図上に無料表示する
気が付けばFBのいいね!が200を超えました!「地図 プロット」「地図 マッピング」「グーグルマップ プロット」などのキーワードで多くの方にご覧いただいております...

GoogleMapのストリートビュー表示画面が要素の上に回ってしまう場合

スマートフォン表示をするときに、インクループではよくこんな感じに電話番号やメールフォームといったコンタクト系のアイコンや、ライン、フェイスブック、ツイッターといったSNSアイコンを並べて、クリック一つで対象のリンクに飛べるようにしています。

2016-09-16_09h37_17

GoogleMapさんの表示タイプは、地図タイプとストリートビューと大きく分けて二つあります。地図タイプを埋め込む場合は問題なかったのですが、ストリートビューで表示したときに、どうもこのアイコンを並べている場所の上を通ってしまうようなんですね。

これはアイコンを並べている場所に〔z-index:1;〕を入れるだけで即解決する問題でした。以下のような感じですね。

2016-09-16_09h38_03

アップデート毎にこまかな注意が必要ですね。

GoogleMapが影響するlightboxなど同一画面上で展開する要素の挙動不審

前にlightboxタイプのスクリプトを使用した可変グリッドレイアウト、タイル状のギャラリーのトップデザインが魅力的な、Wordpressテーマのお話をしました。

【Photoshop】複数、多量の画像を一度、一括で処理する方法

名称未設定-2【Photoshop】複数、多量の画像を一度、一括で処理する方法
Wordpressのテーマにこういうのがあります。http://wp-shotoku.com/可変グリッドレイアウト、あるいはリキッドレイアウト、フレキシブルレイアウト、と呼ばれています。...

このタイプのスクリプトとGoogleMapは、純粋に表示する画面の重さゆえに相性が悪いものが多いです。特にギャラリー量が多ければ多いほど、挙動がふわふわします。

特にスマートフォンでの表示は絶望的で、重さに耐えきれずアプリが強制終了することになるのでご注意ください……気づかないでしばらく苦しんでいました。

Lightboxタイプのギャラリーは、別ページにリンクを飛ばすのではなく、その一ページ上で大量の情報を展開するため、あまり数多く利用すると、PCでは生きていてもスマートフォンで死ぬケースが多いようです。ギャラリー10枚に対しすべてのフォトに詳細をつけて、GoogleMapさんを埋め込む、なんてことになると身動きとれなくなっちゃうようです。

GoogleMapをフルで利用する際にはAPIキーが必要になっています

2016年6月22日より、新規でサイトを制作してGoogleMapを表示する場合には、APIキーが必要になりました。前はどないやったんやろう(遠い目)

Application Programming Interface (API)

あるプログラムやソフトウェアなどの機能やデータを、外部の他のプログラムから呼び出して利用するための、手順やデータ形式を定めた規約

そもそもAPIキーってなんぞ、といいますと、扉と扉を繋ぐ鍵みたいなものです。ウェブサイトという部屋とGoogleMapという部屋つなげる鍵です。

いちいちAPIキーとか取得しなくてもMap表示できるじゃん「共有」から「地図を埋め込む」を選べばすぐにURL取得できるじゃん、てのもあるかもしれませんが、APIキーを取得してGoogleMapをHPに埋め込むと、結構多彩な仕様変更ができるのですね。

自社サイトのGoogleMapのデフォルトピンのデザインアイコンや、吹き出しを使いたい、となってくると、このAPIアドレスが必須になってきます。

どんなことができるの? という方は、見た目だけですがこんなことができます、ということでこんなサイトをご案内。

EZ Map

こんな機能があります。

GoogleMapAPI

Google Map API

GoogleMapの「リンクを共有」「地図を埋め込む」を利用する際に出てくる「この地図は自分専用です」の意味

GoogleMapには場所を保存しておく機能がついています。Googleアカウントに登録していると、ログインすることでこれらが閲覧可能になります。

メニューから「マイプレイス」>「保存済み」を選ぶと、☆印のついた保存みの場所がでてきます。よく行くところ、行ってみたい場所、これから向かう場所などを保存しておくわけです。旅行の予定なんかにとても便利ですね。

GoogleMap マイプレイス

この保存機能はGoogleアカウントに紐づいて動いているので、Googleアカウントにログインしたまま、企業のHPなどに行って地図をみると、自分が保存した場所に☆がついています。

「この地図は自分専用です」の意味はここです。Googleアカウントをログアウトすると当然見られなくなります。

 

企業HPで訪問者の「自分専用の地図」が表示されてしまう、というのは……まあ、悪くはないですけどどうなんでしょうかね。企業さんによると思うのですが、お気にされる企業さんはAPIキーを取得することをオススメします。普通のWEBサイトなら無料で取得が可能です。

 

Google Map API

 

HPを制作する際にがっつりGoogleMapを埋め込みたい、というときは、APIキーを取得したうえでのご依頼をお勧めいたしますー!

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

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

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

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

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

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

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る