Google Map マイマップ

Google

Google マイマップの埋め込み地図がiPhoneのSafariで表示されない!

こんにちは。
@OfficeTAKUです。

GoogleマップをWebページに埋め込む際にGoogle Map の マイマップ機能を利用してみました。

マイマップは便利!だけど、iPhone の サファリで表示されない!

マイマップなら、マーカーの位置も自由に設定でき、マーカーの種類を変更したり、オリジナルなラベルを表示させたりもできます。

埋め込みコードを取得し、ページ内に貼り付けて、ちゃんと表示されるようになりました。

「これでばっちり!」と思ったのもつかのま、iPhone (現在の私の環境:iPhone X / iOS 11.3.1)の Safari では表示されません。ガックリorz
iPhone の Safari

iPhone の Google Chrome では、ちゃんと表示されます。
iPhone の Chrome

念のため Mac の Safari では…… ちゃんと表示されました。
Macのサファリ

グーグルマップ埋め込みテスト用のページを作ってみました。iPhoneで確認してみてください。

何故マイマップ? マイマップじゃなくてもいいんじゃない?

既に住所や企業名がGoogle Map に登録されているところであれば、

  1. 該当住所を検索
  2. メニューをクリック
  3. [地図を共有または埋め込む]をクリック
  4. [地図を埋め込む]タブをクリック
  5. サイズなどを指定し[HTMLをコピー]をクリック
  6. コピーされたコードを該当の箇所に貼り付ける

で、済んでしまいます。

住所が登録されていないところにはマーカーが表示されない!

ところが、今回お客様の新しいオフィスは新築、現在は更地で、該当の所番地(例えば、1丁目35)で検索すると「1丁目付近」で検索されて正確な位置にマーカーが表示されません。

その番地の前後、例でいうと「1丁目34」「1丁目36」は現在も住宅など建物があり、そこにはマーカーが表示されます。
しかし、表示したいところにはマーカーが表示されません。

緯度経度で検索すれば、そこにマーカーは表示されますが、埋め込みコードから表示された結果は世界地図状態になってしまいます。
そこでマイマップを作成したのでした。

Google Maps API を 利用して好きな位置にマーカーを表示

最終的には、Google Maps API を利用して任意の位置にマーカーをつけた地図を作成してみました。

作成した、といっても 下記のサイトなどを参考に コードをコピペさせてもらい、位置や文章などを書き換えただけです。

まだ、思った通りにはできませんが、とりあえずは課題クリア。

しかし、単独のページ(HTMLファイル)だったら問題ないのですが、WordPress の投稿や固定ページ では、Pタグが自動的に挿入されてしまうため上手くいかず、一苦労でした。そのあたりはまた後日。

Google Docs から WordPress へ!前のページ

Macユーザーに復帰するためリハビリ中-どうする日本語入力!次のページ

ピックアップ記事

  1. Amazonプライム・ビデオで今見ておくべき作品
  2. 忙しい朝もコーヒーは欠かせない!お湯を沸かすのすら面倒な人におすすめ!ネスカフェ…
  3. 【レビュー】これはおすすめ!13インチ MacBook Pro にぴったりな I…
  4. 公認会計士と司法試験/予備試験合格の勉強のプロが教えてくれる「メモリーツリー」勉…
  5. 机からケーブルを落とさない NuAns WORKLIFE FOLDKEEPER …

関連記事

  1. ドラえもん生誕100年前記念の”みらいサーチ”

    Google

    「ドラえも〜ん」って呼んでますか?Googleアプリで音声検索

    こんにちは。今日9月8日が誕生日の@OfficeTAKUです。…

  2. Google

    ぐぐたす (Google+) の「おまかせビジュアル」うまくはまればきれいです (^^♪

    こんにちは。ぐぐたすも細々やっている @OfficeTAKUです。…

  3. Google Santa Tracker

    Google

    サンタさんはいまどこに?サンタさんを待ちながら楽しく遊べる、Google Sant Tracker

    こんにちは。昔はよい子だったかもしれない?@OfficeTAKUで…

  4. Google Doodle ロンドンオリンピック開会式 2012/7/27
  5. Google

    「ぐぐたす」のコミュニティがいい感じです。

    こんにちは。なんだかんだいってGoogle好き@OfficeTAK…

  6. http://www.google.co.jp/doodle4google/

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

  1. ビジネス統計スペシャリスト

人気の記事

  1. Surface Mobile Mouse
  1. マイクロソフト製品の新元号対応について

    Windows

    Microsoft 製品 WindowsおよびOfficeの新元号対応はどうした…
  2. Word

    [Word]「文字の均等割り付け」を上手に使って見栄えの良い文書に!
  3. 【Windows・Mac】拡張子がHEICのiPhone写真をJPEGに変換する方法

    iOS

    【Windows・Mac】拡張子がHEICのiPhoneで撮影した写真をJPEG…
  4. Time Machine からの復元

    Mac

    [Mac] MacBook Pro SSD交換プログラム修理完了!タイムマシンの…
  5. Photo by JESHOOTS.COM on Unsplash

    WebService

    [Amazon] 30日間無料体験!最新アニメから懐かしのアニメまで豊富に揃って…
PAGE TOP