ページの特定のエリアにGoogleマップを埋め込んでみましょう。Googleアカウントが必要なので、Gmailをあらかじめ作成しておきます。
Googleマップにアクセスする
Googleマップ https://www.google.co.jp/maps
まずはGoogleマップにアクセスし、ログインします。
マップの作成
検索欄をクリックし、履歴の一番下に表示される「マイマップ」を選びます。
検索欄の下にマイマップが表示されるので、右側の「作成」を選びます。
新しい地図が表示されます。
地図名とレイヤー名を変更しておきましょう。
「無題の地図」をクリックして、地図のタイトルを入力し「保存」します。
「無題のレイヤー」をクリックして、レイヤー名も付けて保存します。
地図とレイヤーに名前が付きました。
表示する地点の登録
地図に表示させたい地点を表示させます。検索欄で名称などで検索もできますし、マップを操作してもかまいません。名称で検索した場合はマーカーをクリックして、表示されたウインドウの「地図に追加」を選びます。自分でマーカーを作成することもできます。
マーカーに名前を付けて保存します。
地図のスタイルを変更するには「基本地図」右の三角形をクリックします。
左のウインドウに追加したマーカー地点にカーソルをもっていった時に表示される右側のマークをクリックすると、マーカーのカラーやアイコンの形を変更することができます。
「他のアイコン」をクリックすると変わった形のアイコンに変更することもできます。
埋め込みコードの取得
画面の右上にある「共有」をクリックします。
「名前と説明と追加」のウインドウが表示されるので、「保存」をクリックします。
「共有設定」のウインドウが表示されるので、「アクセスできるユーザー」の右側にある「変更」をクリックします。
「リンクを共有」のウインドウが表示されるので、「ウェブ上で一般公開」を選んで「保存」をクリックします。
「共有設定」の画面にもどるので、「完了」をクリックします。
次に、左側のウインドウの左上にあるフォルダアイコンをクリックして、「自分のサイトに埋め込む」を選びます。
「この地図を埋め込む」のウインドウが表示されるので、コードをコピーして「OK」をクリックします。
Googleマップ上での設定は以上です。
ADPS用のHTMLファイルの作成
コピーしたコードをWebオーサリングソフトやエディタに新規ファイルにペーストします。
<iframe>のタグの前に下記のコードを挿入する。
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>NDG Map</title>
</head>
<body>
<iframe>のタグの後に下記のコードを挿入する。
</body>
</html>
最寄り駅からのルートなどを表示させたい場合
目的地のマーカーをクリックした時に表示されるウインドウの「ここまでのルートを表示」ボタンをクリックします。
左のウインドウのA点を入力するウインドウが表示されるので、目的にまでのルートを表示させる地点を入力します。入力を確定するとルートがマップ上に表示されます。
Webコンテンツの配置
InDesignドキュメントのページにグラフィックフレームを作成します。
Folio OverlaysのWebコンテンツを選びます。
「URLまたはファイル」右のフォルダアイコンをクリックします。
先ほど保存したHTMLファイルを選択します。
Webコンテンツの設定をします。
Content Viewerでの表示
