HTMLスキル - 第7章 Lesson8

google mapを表示させる方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ページ内にgoogle mapを表示する方法について、初心者向けに解説しています。



この動画で学べること

・<iframe>タグを使って、GoogleMapを表示させる方法



<iframe>タグを使って、GoogleMapを表示させる方法

<iframe>タグを使って、GoogleMapを表示させてみましょう。
まず、インターネットでGoogleMapを開き、地図の表示させたい場所を入力します。
今回は「京都駅」にしておきます。
地図が表示されたら、ページの右下にある歯車のアイコンをクリックし、「地図を共有または埋め込む」を選択してください。
「地図を埋め込む」のタブをクリックし、表示されたURLをコピーします。
練習ファイルの<body>タグの中に、コピーしたURLをペーストします。
これで、GoogleMapを埋め込むことができました。
また、width属性とheight属性を追加すれば、地図の大きさを変更することも可能です。



 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1634.4269351303362!2d135.75853285!3d34.985324850000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600108ae918b02ef%3A0xb61a446e74a21c08!2z5Lqs6YO96aeF!5e0!3m2!1sja!2sjp!4v1434433051498" width="1000" height="1000" frameborder="0" style="border:0"></iframe>



ここまでできたら 、保存してブラウザで見てみましょう。
指定した場所のGoogleMapを埋め込むことができました。