記事の詳細
GoogleMapのWEBサイトでの表示、埋め込みやカスタマイズにおけるあれこれ
こまごまとたくさんいろんなことを更新し続けているGoogleMapさんですが、先日ストリートビューを表示していた箇所でちょっとしたバグが見られました。
まあ基本的なところになりますが、GoogleMapさんの簡単な設置方法はこちら
＞GoogleMapのデフォルトの「地図を埋め込む」「場所を共有する」を使う場合
＞もっとカスタマイズして埋め込む場合【「Google マップ」の埋め込み地図をカスタマイズする方法まとめ】
社長のこんな記事も
＞3分でプロット・マッピング！エクセル顧客住所をGoogleマップの地図上に無料表示する
今回のブログの見出しはコチラです！
GoogleMapのストリートビュー表示画面が要素の上に回ってしまう場合
スマートフォン表示をするときに、インクループではよくこんな感じに電話番号やメールフォームといったコンタクト系のアイコンや、ライン、フェイスブック、ツイッターといったSNSアイコンを並べて、クリック一つで対象のリンクに飛べるようにしています。
GoogleMapさんの表示タイプは、地図タイプとストリートビューと大きく分けて二つあります。地図タイプを埋め込む場合は問題なかったのですが、ストリートビューで表示したときに、どうもこのアイコンを並べている場所の上を通ってしまうようなんですね。
これはアイコンを並べている場所に〔z-index:1;〕を入れるだけで即解決する問題でした。以下のような感じですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.icon-container { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba( 0, 0, 0, 0.6 ); height: 60px; z-index: 1; } <div class="icon-container"> <div class="icon-container_inner"> <a class="icon-container_inner_btn" href="https://incloop.com/contact/">お問い合わせ（無料）</a> <div class="icon-container_telbox"> <a class="phone_icon" href="tel:0427748442"><span class="icon-phone"></span></a> </div> </div> </div> |
アップデート毎にこまかな注意が必要ですね。
GoogleMapが影響するlightboxなど同一画面上で展開する要素の挙動不審
前にlightboxタイプのスクリプトを使用した可変グリッドレイアウト、タイル状のギャラリーのトップデザインが魅力的な、Wordpressテーマのお話をしました。
＞【Photoshop】複数、多量の画像を一度、一括で処理する方法
このタイプのスクリプトと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アドレスが必須になってきます。
どんなことができるの？ という方は、見た目だけですがこんなことができます、ということでこんなサイトをご案内。
こんな機能があります。
GoogleMapの「リンクを共有」「地図を埋め込む」を利用する際に出てくる「この地図は自分専用です」の意味
GoogleMapには場所を保存しておく機能がついています。Googleアカウントに登録していると、ログインすることでこれらが閲覧可能になります。
メニューから「マイプレイス」＞「保存済み」を選ぶと、☆印のついた保存みの場所がでてきます。よく行くところ、行ってみたい場所、これから向かう場所などを保存しておくわけです。旅行の予定なんかにとても便利ですね。
この保存機能はGoogleアカウントに紐づいて動いているので、Googleアカウントにログインしたまま、企業のHPなどに行って地図をみると、自分が保存した場所に☆がついています。
「この地図は自分専用です」の意味はここです。Googleアカウントをログアウトすると当然見られなくなります。
企業HPで訪問者の「自分専用の地図」が表示されてしまう、というのは……まあ、悪くはないですけどどうなんでしょうかね。企業さんによると思うのですが、お気にされる企業さんはAPIキーを取得することをオススメします。普通のWEBサイトなら無料で取得が可能です。
HPを制作する際にがっつりGoogleMapを埋め込みたい、というときは、APIキーを取得したうえでのご依頼をお勧めいたしますー！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
この記事へのコメントはありません。