Perl Web開発者のHTML・CSS入門

googleマップをページの中に埋め込む

googleマップをページの中に表示しましょう。

googleマップのサイト

googleマップのサイトへ行きましょう。

googleマップ

住所を入力

検索エリアに住所を入力しましょう。

共有ボタンをクリック

共有ボタンをクリックします。

地図を埋め込むをクリック

地図を埋め込むをクリックします。

HTMLをコピーをクリック

HTMLをコピーをクリックします。

自分のサイトに埋め込む

自分のサイトにコピーしたHTMLを、ペーストします。

googleマップの地図の幅を100%にするには?

地図の幅を100%にするにはCSSを使って「width:100%;」を設定します。もともとのwidth属性は削除しましょう。 

<!-- 変更前 -->
    <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>
    
<!-- 変更後 -->
    <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>

googleマップでスクロールしたときに、googleマップが反応してしまうのを防ぐには?

初期状態では、スクロールすると、「地図をズームするには、Ctrlキーを押しながら、スクロールしてください」と表示されたり、地図が拡大したり、googleマップが、意図せずに反応してしまいます。

これを防ぐ方法があります。CSSで「pointer-events」を「none」を指定します。 

    <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>

横幅を100%にしている場合は、合わせて記述します。 

    <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>

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

　ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。
Perlクラブ