前回の記事で 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を加え設定します。 今確認してみると、ネームカードの部分が表示されません。
コメントを残す