サイトに埋め込もうと思ってGoogleマップで住所検索をしたら、なぜかいつもの赤いマーカーが表示されなくて困ったことがありました。
どうして表示されないのか分からず、とにかく対処法を色々検索した結果、GoogleマップのAPIを利用し、JavaScriptを使ってマーカーを追加表示させる方法を見つけたのですが、実は、そんなややこしいことをする必要はまったくなくて、すごく簡単なことが原因でした!
無駄な時間をくってしまったので、その時のことをメモ!
この記事の内容は、2015年10月15日に書かれています。
Googleマップ埋め込み手順
念のため、サイトにGoogleマップを埋め込むときの手順を確認しておきます。
まず、Googleマップで住所を検索。
たとえば、京都水族館だったら、Googleマップで「京都府京都市下京区観喜寺町35-1」と検索すれば、おなじみの赤いマーカーが表示されますね。
そのまま画面左上のメニューから「地図を共有または埋め込む」を選びます。必要であればサイズも、「大」「中」「小」から選べます(サイズは貼り付けたあとにコードを編集すれば自由自在です)。
あとは出てきたタグをコピー&ペーストするだけで、あっという間に埋め込み完了!です;)
これはサイズ「小」をそのまま埋め込んでいます。
マーカーが表示されないGoogleマップ
では、同じように京都タワーの地図を表示させたいと思います。
Googleで「京都タワー」と検索すれば、住所もすぐにわかります!
Googleマップでいつものように「京都府京都市下京区烏丸通七条下る東塩小路町721-1」を検索。
すると・・・・・・こんな表示になります。
いつもの先の尖った赤いマーカーがありません。
京都タワーはGoogleマップに情報が多数登録されているので、赤い丸のなかに四角の描かれたマークが表示されています。
でも、たとえばこれが新しくオープンする予定のレストランだったりすると、なんのマークも表示されない状態で地図だけが出てきます。
この状態でも、いつもどおり画面左上のメニューから「地図を共有または埋め込む」で、出てきたコードを貼り付ければ、マップを埋め込むことは出来ます。
ただし、もちろん、マーカーが表示されません。
それでは困ります。
どうしてマーカーが表示されないの?
ここからが本題なんですけれど、実は、先ほど検索した京都タワーの住所・・・・・・Googleマップでは認識できない住所なんです!
もう一度検索した住所を見てみましょう。
「京都府京都市下京区烏丸通七条下る東塩小路町721-1」
問題になるのは「烏丸通七条下る」の部分。
これは、京都特有の住所表記の仕方で、「烏丸通りを七条通との交差点から南へ下っていったところ」ってことなんですが、場所を分かりやすくするための説明みたいなもので、実際の住所とは違うんですね。
だから、Googleマップにきちんと認識させるには、「京都府京都市下京区東塩小路町721-1」とすればオッケーです。
埋め込みもこの通り! ちゃんといつもの赤いマーカーが表示されます。
京都での暮らしが長い人にとっては常識みたいなものなのかもしれないのですが、他府県の人にとっては「あ、そうだったんだ;」ということもあるんじゃないでしょうか。
「住所は間違ってないはずなのに、何でちゃんと出てこないの・・・・・・」ということになったら、間違ってはいないけど余分な情報が入っていないか、チェックしてみる必要がありそうですね!