地図の埋め込み方法

Google Mapをホームページに埋め込む方法

STEP1【Google Mapの地図情報の取得方法】

以下の①~④の通りに作業をし、埋め込みコードを取得してください。

①Google Mapページにお進みいただき、埋め込みたい地図の住所を検索してください。

URL:https://www.google.co.jp/maps

 

②【共有】をクリックして下さい。

 

③【地図を埋め込む】をクリックしてください

 

④埋め込みコードが表示されるので、こちらをコピーして下さい。

 

 

STEP3【ブログ記事への反映方法】

 

お使いの管理画面ごとに操作方法が異なりますため、
下記よりご自身でお使いの管理画面の種類をお選べ下さい。

—————————————————-

・DesignCMS(WPベース)の場合

・DesignCMS(MTベース)の場合

—————————————————-

以下の手順⑤~⑥の通りに作業をし、埋め込みコードを設置してください。

 

DesignCMS(WPベース)の場合 

⑤地図を埋め込むページで【テキスト】をクリックして下さい。

 

⑥Google Mapのページで取得した、埋め込みコードを貼り付けてください。

※<iframe~・・・></iframe>まで全て貼り付けてください。

以下で地図の縦幅・横幅を設定することができます。

 

⑦【ビジュアル】をクリックし、地図が反映されているか確認して下さい。

 

⑧地図が反映されているのを確認し、公開して下さい。

 

 

DesignCMS(MTベース)の場合

⑤地図を埋め込むページで【ソース】ボタンをクリックして下さい。

 

⑥Google Mapのページで取得した、埋め込みコードを貼り付けてください。

※<iframe~・・・></iframe>まで全て貼り付けてください。

以下で地図の縦幅・横幅を設定することができます。

 

⑦【ソース】ボタンを再度クリックし、地図が反映されているか確認して下さい。

※地図の埋め込み箇所が編集ページ内で【IFRAM】と表示される場合や
その際にプレビューで確認しても地図が非表示になっている場合には
実際のページでは下記の様に地図が表示されています。
記事を一度公開状態にしてご確認下さい。

 

⑧地図が反映されているのを確認し、公開して下さい。