【GoogleMap】APIなしでのいろいろな埋め込み＆口コミを見えなくする方法【備忘録】

通常の埋め込み

GoogleMapのページから[共有]→[地図を埋め込む]→[HTMLをコピー]で取得したiframeのコードを埋め込む場合

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.68520835826979!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1712452705876!5m2!1sja!2sjp" width="600" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

口コミ表示領域を非表示にしたい場合は、heightを300未満にするかwidthを400未満にする

参考：https://www.webdesignleaves.com/pr/plugins/googlemap_02.html#h3_index_14

※以下はPCにて表示確認してください

height:299

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.68520835826979!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1712452705876!5m2!1sja!2sjp" width="600" height="299" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

height:399

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.68520835826979!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1712452705876!5m2!1sja!2sjp" width="399" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

CSSで通常埋め込み時のUIを隠す

参考：https://monakanote.net/coding/css-googlemaps-20200624/

<style>
    #map_clip {
        overflow: hidden;
        position: relative;
        width: 600px;
        height: 500px;
    }
    #map_clip iframe{
        position: absolute;
        inset: -150px;
        width: calc(100% + 300px);
        height: calc(100% + 300px);
    }
</style>
<div id="map_clip">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6481.333372110915!2d139.7477827333761!3d35.68520835826979!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1712452705876!5m2!1sja!2sjp" width="600" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

緯度経度指定など、パラメーター指定をする

いつまで使える方法なのか分かりませんが2024年4月現在この方法でも無料で使えます。

参考：https://www.webdesignleaves.com/pr/plugins/googlemap_02.html#h3_index_14

ピンを立てる：qパラメーター

<iframe src="https://maps.google.co.jp/maps?output=embed&q=35.68562664486212,139.75278237062415&z=15&hl=ja" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

ピンを立てない：llパラメーター

<iframe src="https://maps.google.co.jp/maps?output=embed&ll=35.68562664486212,139.75278237062415&z=15&hl=ja" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>