ホームページ作成ソフトメニュー

ホームページにグーグルマップを表示させる方法

A グーグルマップは簡単にホームページに埋め込みできます

グーグルマップを使ったフォームでの地図作成例

ディズニーランドのマップ表示例

グーグルマップを開きます
グーグルマップ
 

 

千葉県浦安市舞浜1-1

住所を下記画像の検索窓に貼り付けます。

 

グーグルマップ

 

検索ボタンをクリック
 

グーグルマップ

 

共有をクリック
 

グーグルマップ

 

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

グーグルマップ

 

フォームタグをコピーして管理画面に貼り付け
 

グーグルマップ

 

ディズニーランドの地図のフォームタグ
 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25942.050537645908!2d139.8666237477316!3d35.6337334633802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187d1047835c47%3A0x89620b95c4d7f418!2z44CSMjc5LTAwMzEg5Y2D6JGJ55yM5rWm5a6J5biC6Iie5rWc!5e0!3m2!1sja!2sjp!4v1484843927600" width="100%"; height="450" frameborder="0" 
style="border:0" allowfullscreen></iframe>

 

フォームタグで、地図の横幅をwidth="100%"で指定しておくと、スマホの画面の縦、横で見た場合どちらでも綺麗に横幅いっぱいで表示されます。

 

パソコンブラウザ表示ではメインコンテンツの幅で表示される事になります。

 

グーグルマップ最適表示

シリウスでは画像のように、マップのタグを青色反転させてから、管理画面で右クリック「パーツの挿入」を選択

 

「Googleマップのタグ」をクリックで携帯端末でマップが最適表示されます。