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. 【iPhone】音声読み上げを利用する方法
  2. 机からケーブルを落とさない NuAns WORKLIFE FOLDKEEPER …
  3. [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
  4. [レビュー] リンダ・リウカス『ルビイのぼうけん こんにちは!プログラミング』:…
  5. 【Instagram】iPhoneアプリ版インスタグラムアカウントを非公開アカウ…

関連記事

  1. 2013/6/10 Goolge Doodle モーリス・センダック 生誕85周年

    Google

    マックス も かいじゅうたちも登場するよ!2013年6月10日 Google Doodle「モーリス…

    こんにちは。「かいじゅうたちのいるところ」は何度も読み聞かせしてき…

  2. Google

    Gmail を テキスト形式にする

    Gmail で メッセージを作成する時にテキスト形式に変更する方法です…

  3. Facebook

    Facebook:イベントをGoogleカレンダーに表示させる方法

    前回、MacのiCalにFacebookイベントを表示させる方法をご紹…

  4. Google

    YouTube の Cosmic Panda が かわいい

    YouTubeで動画を観る方多いですね。動画は、どうしても見てしま…

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

LINE公式アカウント:OfficeTAKU

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

最近の記事

  1. 武田英志『伝わるデザインの授業 一生使える8つの力が身につく』

人気の記事

  1. Surface Mobile Mouse
  1. Photo by JESHOOTS.COM on Unsplash

    WebService

    [Amazon] 30日間無料体験!最新アニメから懐かしのアニメまで豊富に揃って…
  2. Photo by Marvin Meyer on Unsplash

    MS Office

    【Office】 ExcelやWordを使うならこれだけは知っておきたい Off…
  3. マイクロソフト製品の新元号対応について

    Windows

    Microsoft 製品 WindowsおよびOfficeの新元号対応はどうした…
  4. MDノートダイアリー 手帳 2019年 A5 マンスリー

    おすすめ

    2019年の手帳購入! MD ノートダイアリー 手帳 2019年 A5 マンスリ…
  5. マンガ『スティーブズ』

    電子書籍

    [KIndle] Appleの創始者である2人のスティーブを描いた漫画『スティー…
PAGE TOP