Google Mapの拡大地図を非表示にするが邪魔なので吹き飛ばす方法【レスポンシブ対応】

拡大地図を非表示にするが邪魔なので吹き飛ばす

論より証拠!

コピペして使ってね。

一瞬でグーグルマップの左上のクチコミ情報を吹き飛ばすことができます!
正確な位置情報ではない かつ クチコミが低い場合に非表示にさせると便利です。
不要なブランディングの低下を避けることができます。

目次

HTML

<div class="responsive-map-container">
<iframe src=★埋め込みURL" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="expand_map">
<p><a href="★埋め込みURL" target="_blank">拡大地図を表示</a></p>
</div>

CSS

/* PC */
@media screen and (min-width: 769px) {
.responsive-map-container {
  position: relative;
  width: 100%;
  padding-bottom: 71%;
  overflow: hidden;
}
.responsive-map-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: -170px;
}
.expand_map p {
	text-align: center;
	margin-bottom: 24px;
	width: 100%;
}
}

/* SP */
@media screen and (max-width: 768px) {
.responsive-map-container {
  width: 100%;
  height: 250px;
  overflow: hidden;
	margin-top: 16px;
	margin-bottom: 16px;
}
.responsive-map-container iframe {
  width: 100%;
  height: 600px;
  margin-top: -150px;
}
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

売れる仕組みを創り、Webで売上アップさせる
株式会社WebSanta 代表取締役
 
幼少期、何も誇れる能力も無く、自分に自信が無い日々を過ごす。
小中高校時代、父の3億の借金、生死をさまよう交通事故、大火傷、彼女の死にも遭う。
それらをキッカケに「たった一度の人生、悔いなく生きたい!」と心に決める。
しかし、大学時代、バレンタインデーに当時の彼女にフラれ、自殺しようと銃社会アメリカに渡るもシリコンバレーのIT革命に魅せられ帰国。
 
ケンブリッジ大学語学留学、東京理科大学経営学部経営学科、すごい起業塾、ビジネスコンテスト優勝を経て、株式会社WebSantaを設立。
総額600万円の詐欺やうつ病に遭いながらも、起業12年・相談1000人・サイト制作100件・セミナー100回・総売上3億に貢献。
 
使命は「起業家に未来を届ける」
ビジョンは「Webマーケティングで起業家のビジネスを革新させる」
夢は「悲しい倒産を無くす」こと。

コメント

コメントする

目次