HTML・CSS Writing 2022

Embed google map in page

Let's display the google map in the page.

google map site

Let's go to the google map site.

google map

Enter your address

Enter your address in the search area.

Click the share button

Click the share button.

Click Embed Map

Click Embed Map.

Click Copy HTML

Click Copy HTML.

Embed in your site

Paste the HTML you copied to your site.

How to make the map width of google map 100%?

To make the map width 100%, use CSS to set "width: 100%;". Let's delete the original width attribute.

<!-Before change->    <iframe src = "https://www.google.com/maps/embed?pb=! 1m18! 1m12! 1m3! 1d3241.693119529023! 2d139.7520306508713! 3d35.65993178010213! 2m3! 1f0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x60188bc0efc0a2f9%3A0x57c8c1c9b9e6a938! 2z44CSMTA1LTAwMTIg5p2x5Lqs6YO95riv5Yy66Iqd5aSn6ZaA77yR5LiB55uu77yS4oiS77yS77yT! 5e0! 3m2! 1sja! 2sjp! 4v1580941259536! 5m2! 1sja! 2sjp "width =" 600 "height =" 400 "frameborder =" 0 "style = "border: 0;" allowfullscreen = ""> </iframe>
    
<!-After change->    <iframe style = "width: 100%;" src = "https://www.google.com/maps/embed? pb =! 1m18! 1m12! 1m3! 1d3241.693119529023! 2d139.7520306508713! 3d35.65993178010213! 2m3 ! 1f0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x60188bc0efc0a2f9%3A0x57c8c1c9b9e6a938! 2z44CSMTA1LTAwMTIg5p2x5Lqs6YO95riv5Yy66Iqd5aSn6ZaA77yR5LiB55uu77yS4oiS77yS77yT! 5e0! 3m2! 1sja! 2sjp! 4v1580941259536! 5m2! 1sja! 2sjp "height =" 400 "frameborder = "0" style = "border: 0;" allowfullscreen = ""> </iframe>

How to prevent google map from reacting when scrolling with google map?

In the initial state, when scrolling, "To zoom the map, hold down the Ctrl key and scroll" is displayed, the map is enlarged, and the google map reacts unintentionally. ..

There are ways to prevent this. Specify "none" for "pointer-events" in CSS.

    <iframe style = "pointer-events: none;" src = "https://www.google.com/maps/embed? pb =! 1m18! 1m12! 1m3! 1d3241.693119529023! 2d139.7520306508713! 3d35.65993178010213! 2m3! 1f0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x60188bc0efc0a2f9%3A0x57c8c1c9b9e6a938! 2z44CSMTA1LTAwMTIg5p2x5Lqs6YO95riv5Yy66Iqd5aSn6ZaA77yR5LiB55uu77yS4oiS77yS77yT! 5e0! 3m2! 1sja! 2sjp! 4v1580941259536! 5m2! 1sja! 2sjp "height =" 400 "frameborder = "0" style = "border: 0;" allowfullscreen = ""> </iframe>

If the width is set to 100%, describe it together.

    <iframe style = "width: 100%; pointer-events: none;" src = "https://www.google.com/maps/embed?pb=! 1m18! 1m12! 1m3! 1d3241.693119529023! 2d139.7520306508713 ! 3d35.65993178010213! 2m3! 1f0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x60188bc0efc0a2f9%3A0x57c8c1c9b9e6a938! 2z44CSMTA1LTAwMTIg5p2x5Lqs6YO95riv5Yy66Iqd5aSn6ZaA77yR5LiB55uu77yS4oiS77yS77yT! 5e0! 3m2! 1sja! 2sjp! 4v1580941259536! 5m2! 1sja! 2sjp "height = "400" frameborder = "0" style = "border: 0;" allowfullscreen = ""> </iframe>