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タグが自動的に挿入されてしまうため上手くいかず、一苦労でした。そのあたりはまた後日。

ピックアップ記事

  1. [iTunes] Apple Music ライブラリ内の曲を再生したら全く別の曲…
  2. [Facebook] プレビュー機能の脆弱性でトークン流出!アカウントの乗っ取り…
  3. [Instagram] インスタグラムで勝手にレイバンサングラスの投稿がされたら…
  4. 記憶と記録をデジタル化しておくことの重要性と検討すべき項目を整理してみた
  5. [レビュー] 『親子で学ぶ プログラミング超入門 ~Scratchでゲームを作ろ…

関連記事

  1. Google

    GoogleのNexus Contraptionsが面白すぎてついつい…

    またまた、Googleがおしゃれで楽しいゲームをリリースしています。…

  2. Photo by Tim Gouw on Unsplash

    Google

    Google Santa Tracker はじまりました!サンタを追いかけよう!

    こんにちは。@OfficeTAKUです。クリスマスが間もな…

  3. Mac 版 の Chromeで更新・バージョンの確認をする手順

    Google

    Google Chrome の 更新・バージョンの確認方法

    こんにちは。@OfficeTAKUです。2018年7月24…

  4. Google

    Googleドライブを利用してPDF書類をテキストに変換する方法

    こんにちは。毎日Google先生にお世話になっている@Office…

  5. Doodle 4 Google 2014
  6. Greplin

    Facebook

    これはすごい!「Greplin」で、Facebookやクラウドサービスの自分の情報を一気に検索

    Facebookの投稿を検索する方法について紹介してきました。…

最近の記事

  1. Photo by Ben Hershey on Unsplash
  2. Photo by Piotr Cichosz on Unsplash
  3. ブラザーDCP-J973N ハガキセット
  4. Photo by Hannes Wolf on Unsplash
  5. Photo by Tim Gouw on Unsplash

人気の記事

  1. Photo by Ben Hershey on Unsplash
  2. Lenovo Mirage Camera with Daydream
  3. Photo by JESHOOTS.COM on Unsplash
  4. 芝寿し「冷凍寿し 小袖棒寿し 甘えび」
  1. 書籍

    [レビュー] 『親子でかんたん スクラッチプログラミングの図鑑』松下孝太郎・山本…
  2. Word

    [Word]「文字の均等割り付け」を上手に使って見栄えの良い文書に!
  3. リボルテック ダンボー ミニ

    玩具

    リボルテック ダンボー ミニ (REVOLTECH DANBOARD mini…
  4. Mac ハングル入力

    Mac

    [Mac] Mac でハングルを入力する方法-macOS High Sierra…
  5. ソフトウェア

    [Mac] データ復元ソフト、EaseUS Data Recovery Wiza…
PAGE TOP