地図(GoogleMaps)を入れる

GoogleMaps(グーグル マップ) の地図の入れ方をご案内します。

操作手順1.GoogleMapコードの取得
操作手順2.GoogleMapコードを部品にいれる
操作手順3.地図のピンの位置がずれている場合

GoogleMapsは、Google社が運営するサービスです。そのため、予告なく仕様や操作手順が変更となる場合があります。 以下の情報は、2016年3月現在の情報です。
 

操作手順1.GoogleMapsコードの取得

1)Googleの検索キーワード欄に「グーグルマップ」と入力して検索し、「Googleマップ」のサイトをクリックします

2)Googleのサイトで、左上の検索窓に住所(会社名)を入力して地図を表示させます

→地図にピンが表示されます

3)左上の三本線のメニューをクリックします

4)[地図を共有または埋め込む]ボタンをクリックします

5)表示サイズを選択してから、「<iframe src から始まるHTMLタグを全てコピーします

6)ホームページ更新の画面に戻り、地図を入れるHTML部品をクリックします

操作手順2.GoogleMapコードを部品にいれる

地図を表示させるには、HTML部品を追加します

1下記ページの手順で、HTML部品を追加します

HTML部品を入れる

2)右パネルHTML入力欄に、先ほどコピーしたグーグルマップのタグを貼り付けます

※編集エリアでは地図の表示は反映されません。HTML(タグ)コードが表示されれば、設定が正常に行われています。

3)画面右上[プレビューをクリックして、HTMLの内容が正常に表示されていることを確認します

4)右上[プレビューを終了する]ボタンをクリックします

手順は以上です。

  • 更新した内容をホームページに反映させるには、左パネルで、更新したページの[更新]ボタンをクリックします。

地図のピンの位置がずれている場合
  1. グーグルマップを開き、ピンを表示させたい場所に移動します。
    (該当の場所付近を検索する) 
  2. ピンを表示させたい場所の上で右クリックし、「この場所について」を選びます。
  3. 画面左上に表示される住所の下の数字をクリックします。

    例:36.15664.139.386646

    →ピンが移動します
  4. 埋め込みタグの取得作業を行い、地図用の部品に貼り付けます。

1)ピンを表示させたい場所で右クリックして「この場所について」をクリック

2)下に表示される数字(緯度経度)をクリックします

3)ピンが移動します

操作手順1に戻って、コードを取得し直します

マニュアル更新情報

2018年8月30日

新機能の追加に伴い、下記のページを追加いたしました。
・書体を変更する

2018年7月2日

新機能の追加に伴い、下記のページを追加いたしました。
共通部品を一部のページのみ非表示にする

2018年7月2日

よくあるご質問ページの「部品・要素の編集について」を更新いたしました。

各種ダウンロード資料

ホームページ更新画面の
基本操作(印刷版PDF資料)

A4カラー印刷用

印刷版PDFはこちらをクリック