どうも、ひろもん(@hiromon_com)です。
ブログで場所の説明をする時などにGoogle Mapを記事に埋め込むことがあると思いますが、Google Mapに登録されている建物やお店、橋やトンネルなどは拡大地図を表示してもピンは消えないので問題ありません。
問題はGoogle Mapに登録されていない場所にピンを立てて記事に埋め込んだ時で、登録されていない場所にピンを立てた場合は、拡大地図を表示するとピンが消えてしまい、ピンがどこにあったのかわからなくなります。
そこで今回は、Google Mapで拡大地図を表示するとピンが消えてしまう問題の解決方法を解説します。
Google Mapでピンが消える問題
問題がないケース
たとえばGoogle Mapで「東京タワー」を指定して地図を埋め込むと以下のようになります。
続いて地図の左上にある[拡大地図を表示]をクリックします。
[拡大地図を表示]をクリックするとGoogle Mapへ移動し、全画面で地図を確認できるようになります。
「東京タワー」はGoogle Mapに登録されているので、[拡大地図を表示]をクリックしたあとでも、きちんと「東京タワー」にピンが立っているので何も問題ありません。
続いて道路にピンを立てて記事に埋め込んでみます。
問題があるケース
まずはピンを立てたい場所で[右クリック]するとメニューが表示されるので、[この場所について]をクリックします。
下に右クリックした場所の情報が表示されるので、[緯度経度]をクリックします。
たくさん表示されている数字が緯度経度です。
はじめに右クリックした何もない場所にピンが立つので、[共有]から地図を記事に埋め込みます。
この方法を使うと、上記のようにGoogle Mapに登録されていない場所にもピンを立てて記事に埋め込めますが、左上にある[拡大地図を表示]をクリックするとピンが消えてしまいます。
上記は[拡大地図を表示]をクリックして表示される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=”[高さ]” | 記事に埋め込む地図のサイズ |
埋め込み方の例
まずはピンを立てたい場所の緯度経度をコピーします。
ピンを立てたい場所で[右クリック]するとメニューが表示されるので、一番上に表示される緯度経度をクリックしてコピーします。
あとは以下の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>
コメント
コメント一覧 (6件)
ランキングからきました。
すごく細かい説明で解りやすかったです。
ありがとうございました。
こんばんは、ランキングから来ました。
こんなやり方があったとは知りませんでした。お店情報とかの記事でよくマップ載せるので今後の参考にさせていただきます!
記事見ました。
現在表示されてないようですが使えなくなったのですか?
みむらさん、コメントありがとうございます。
どうやらGoogleの仕様変更、もしくはバグの影響で、今日から突然表示できないエラーになっているようです。
解決策がわかりましたら、記事に反映させたいと思います。
すごく困ってました!!!
ありがとうございます!!!
プチストレスが解消されました^^
大木ハナさん、コメントありがとうございます。
お役に立てたようで良かったです!