Google Mapで拡大地図を表示するとピンが消えてしまう問題の解決方法を解説

どうも、ひろもん(@hiromon_com)です。

ブログで場所の説明をする時などにGoogle Mapを記事に埋め込むことがあると思いますが、Google Mapに登録されている建物やお店、橋やトンネルなどは拡大地図を表示してもピンは消えないので問題ありません。

問題はGoogle Mapに登録されていない場所にピンを立てて記事に埋め込んだ時で、登録されていない場所にピンを立てた場合は、拡大地図を表示するとピンが消えてしまい、ピンがどこにあったのかわからなくなります。

そこで今回は、Google Mapで拡大地図を表示するとピンが消えてしまう問題の解決方法を解説します。

もくじ

Google Mapでピンが消える問題

問題がないケース

たとえばGoogle Mapで「東京タワー」を指定して地図を埋め込むと以下のようになります。

続いて地図の左上にある[拡大地図を表示]をクリックします。

Google Mapの説明1

[拡大地図を表示]をクリックするとGoogle Mapへ移動し、全画面で地図を確認できるようになります。

Google Mapの説明2

「東京タワー」はGoogle Mapに登録されているので、[拡大地図を表示]をクリックしたあとでも、きちんと「東京タワー」にピンが立っているので何も問題ありません。

続いて道路にピンを立てて記事に埋め込んでみます。

問題があるケース

Google Mapの説明3

まずはピンを立てたい場所で[右クリック]するとメニューが表示されるので、[この場所について]をクリックします。

Google Mapの説明4

下に右クリックした場所の情報が表示されるので、[緯度経度]をクリックします。

たくさん表示されている数字が緯度経度です。

Google Mapの説明5

はじめに右クリックした何もない場所にピンが立つので、[共有]から地図を記事に埋め込みます。

この方法を使うと、上記のようにGoogle Mapに登録されていない場所にもピンを立てて記事に埋め込めますが、左上にある[拡大地図を表示]をクリックするとピンが消えてしまいます。

Google Mapの説明6

上記は[拡大地図を表示]をクリックして表示されるGoogle Mapですが、先ほどまで道路にあったピンが消えており、どこにピンがあったのかわからなくなっています。

これから紹介する方法を使えば、このピンが消える問題を解決できます。

ピンが消える問題の解決方法

Google MapのURLにはいくつもパラメータがあり、以下のようなURLにすると[拡大地図を表示]をクリックしてもピンが消えません。

<iframe src="https://maps.google.co.jp/maps?q=35.507401,139.605887&output=embed&t=m&z=17" width="800" height="600" frameborder="0" style="border:0;"></iframe>

パラメータの意味は以下です。

<iframe src="https://maps.google.co.jp/maps?q=[緯度],[経度]&output=embed&t=[地図の種類]&z=[ズーム値]" width="[幅]" height="[高さ]" frameborder="0" style="border:0;"></iframe>

以下のパラメータ部分を任意で変更して、記事に埋め込んでください。

q=[緯度],[経度] ピンを立てたい場所の緯度経度を入力
t=[地図の種類] t=m(市街地図)
t=k(航空写真)
z=[ズーム値] z=1~20
(16~18くらいが丁度いい)
width=”[幅]” height=”[高さ]” 記事に埋め込む地図のサイズ

埋め込み方の例

まずはピンを立てたい場所の緯度経度をコピーします。

Google Mapのピンが消えない埋め込み方1

ピンを立てたい場所で[右クリック]するとメニューが表示されるので、一番上に表示される緯度経度をクリックしてコピーします。

あとは以下のURLの緯度経度の箇所をたった今コピーした緯度経度に変更します。

<iframe src="https://maps.google.co.jp/maps?q=35.507401,139.605887&output=embed&t=m&z=17" width="800" height="600" frameborder="0" style="border:0;"></iframe>

緯度経度を変更したものが以下です。

<iframe src="https://maps.google.co.jp/maps?q=35.65873334400627, 139.74625069161831&output=embed&t=m&z=17" width="800" height="600" frameborder="0" style="border:0;"></iframe>

上記のコードを記事に埋め込みます。

これで[拡大地図の表示]をクリックしてもピンが消えなくなりました。

もっとズームしたい場合は「Z=17」の部分を「Z=18」に変更します。

ズーム値などはお好みで変更してください。

まとめ

Google Mapで拡大地図を表示するとピンが消えてしまう問題の解決方法を解説してきましたが、いかがでしたか?

拡大地図で地図を確認したい方もいるはずなので、Google Mapに登録されていない場所をブログに埋め込む場合は、ぜひ参考にしてみてください。

コードは以下をコピペして使ってください。

<iframe src="https://maps.google.co.jp/maps?q=35.507401,139.605887&output=embed&t=m&z=17" width="800" height="600" frameborder="0" style="border:0;"></iframe>

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメント一覧 (4件)

  • こんばんは、ランキングから来ました。
    こんなやり方があったとは知りませんでした。お店情報とかの記事でよくマップ載せるので今後の参考にさせていただきます!

  • 記事見ました。

    現在表示されてないようですが使えなくなったのですか?

    • みむらさん、コメントありがとうございます。

      どうやらGoogleの仕様変更、もしくはバグの影響で、今日から突然表示できないエラーになっているようです。

      解決策がわかりましたら、記事に反映させたいと思います。

コメントする

もくじ
閉じる