グーグルマップでネームカードを削除する

Last Updated:2023年07月16日| コメントを残す

前回の記事で WordPress などブログでは、Googleマップを挿入する方法を説明しました。 グーグルマップの挿入コードを文やページに挿入すると、下図のようにネームカードが一緒に表示されます。

Google Map in WordPress - ブログでは、Googleマップを挿入する

最近の作品では、この名前カード(その場所の住所と名前が表示されボックス)を表示しないようにしなければならない状況が発生しました。 開発ツールでは、CSSで非表示になりますが、直接適用してみると隠されていない問題が発生しました。 だから、少しの検索を使用してヒントを得ることができました。

この場合、近道で地図を上に上げネームカード部分を隠すことでした。

グーグルマップコードを次のような形で挿入するようにします(width = 100%の場合)。

<div class="goole-map"><iframe src="https://www.google.com/..." width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe></div>

その後、次のようなCSSを適用します。

.google-map {
width: 100%;
overflow: hidden;
}

.google-map iframe {
margin-top: -150px;
}

ifrmaeの高さは、実際の高さに300pxを加え設定します。 今確認してみると、ネームカードの部分が表示されません。

メモ:


コメントを残す

コメント