Lecture Notes

ページの特定のエリアにGoogleマップを埋め込んでみましょう。Googleアカウントが必要なので、Gmailをあらかじめ作成しておきます。

Googleマップにアクセスする

Googleマップ https://www.google.co.jp/maps
まずはGoogleマップにアクセスし、ログインします。

141105-0046

 

マップの作成

検索欄をクリックし、履歴の一番下に表示される「マイマップ」を選びます。

141105-0048

 

検索欄の下にマイマップが表示されるので、右側の「作成」を選びます。

141105-0050

 

新しい地図が表示されます。

141105-0051

 

地図名とレイヤー名を変更しておきましょう。
「無題の地図」をクリックして、地図のタイトルを入力し「保存」します。

141105-0052

 

「無題のレイヤー」をクリックして、レイヤー名も付けて保存します。

141105-0054

 

地図とレイヤーに名前が付きました。

141105-0055

 

 

表示する地点の登録

地図に表示させたい地点を表示させます。検索欄で名称などで検索もできますし、マップを操作してもかまいません。名称で検索した場合はマーカーをクリックして、表示されたウインドウの「地図に追加」を選びます。自分でマーカーを作成することもできます。

141105-0056

 

マーカーに名前を付けて保存します。

141105-0057

 

地図のスタイルを変更するには「基本地図」右の三角形をクリックします。

141105-0059

141105-0060

 

左のウインドウに追加したマーカー地点にカーソルをもっていった時に表示される右側のマークをクリックすると、マーカーのカラーやアイコンの形を変更することができます。

141105-0062

 

「他のアイコン」をクリックすると変わった形のアイコンに変更することもできます。

141105-0064

 

埋め込みコードの取得

画面の右上にある「共有」をクリックします。

141105-0066

 

「名前と説明と追加」のウインドウが表示されるので、「保存」をクリックします。

141105-0067

 

「共有設定」のウインドウが表示されるので、「アクセスできるユーザー」の右側にある「変更」をクリックします。

141105-0068

 

「リンクを共有」のウインドウが表示されるので、「ウェブ上で一般公開」を選んで「保存」をクリックします。

141105-0070

 

「共有設定」の画面にもどるので、「完了」をクリックします。

141105-0071

 

次に、左側のウインドウの左上にあるフォルダアイコンをクリックして、「自分のサイトに埋め込む」を選びます。

141105-0072

 

「この地図を埋め込む」のウインドウが表示されるので、コードをコピーして「OK」をクリックします。

141105-0073

Googleマップ上での設定は以上です。

 

ADPS用のHTMLファイルの作成

コピーしたコードをWebオーサリングソフトやエディタに新規ファイルにペーストします。

141121-0002

 

<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>

141121-0001

 

 

最寄り駅からのルートなどを表示させたい場合

目的地のマーカーをクリックした時に表示されるウインドウの「ここまでのルートを表示」ボタンをクリックします。

141105-0077

 

左のウインドウのA点を入力するウインドウが表示されるので、目的にまでのルートを表示させる地点を入力します。入力を確定するとルートがマップ上に表示されます。

141105-0079

 

 

Webコンテンツの配置

InDesignドキュメントのページにグラフィックフレームを作成します。

141105-0080

 

Folio OverlaysのWebコンテンツを選びます。

141105-0081

 

「URLまたはファイル」右のフォルダアイコンをクリックします。

141105-0082

 

先ほど保存したHTMLファイルを選択します。

141105-0083

 

Webコンテンツの設定をします。

141105-0084

 

Content Viewerでの表示

ss-2014-10-20-22.19.31

Pocket
LINEで送る

URL
TBURL

返信

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top