CMS活用マニュアル(基本編)

地図を入れる

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

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

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

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

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

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

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

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

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

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

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

操作手順2.GoogleMapコードの取得

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

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

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

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

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

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

手順は以上です。

  • 更新した内容をホームページに反映させるには、左パネルで、更新したページの[更新]ボタンをクリックします。
操作手順3.GoogleMapコードの取得
  1. グーグルマップを開き、ピンを表示させたい場所に移動します。
    (該当の場所付近を検索する) 
  2. ピンを表示させたい場所の上で右クリックし、「この場所について」を選びます。
  3. 画面左上に表示される住所の下の数字をクリックします。

    例:36.15664.139.386646

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

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

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

3)ピンが移動します

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

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

YouTube、Facebook、Twitter等もタグを埋め込むことにより表示が可能です。