jittodesign blog

デザインやグラフィックソフト、カメラなどに関するブログです。

[ADPS]Googleマップを表示する

約3分
[ADPS]Googleマップを表示する

ADPSのWebコンテンツを利用してGoogleマップのマップエリアを表示させる方法を紹介します。

まずはGoogleマップにアクセスし、表示させたい住所を検索・表示させます。画面右下の歯車のメニューから「地図を共有/埋め込む」を選択します。

ADPS_WebSite_29_cc

 

ウィンドウが表示されるので、「地図を埋め込む」タブを選択します。

ADPS_WebSite_30_cc

 

ウィンドウ内に地図が表示されます。

ADPS_WebSite_31_cc

 

ウィンドウ左上のサイズを変更するメニューから「カスタムサイズ」を選択します。

ADPS_WebSite_32_cc

 

ADPS内で表示するフレームサイズに合わせて、サイズを設定します。下にコードが表示されるので、コピーしておきます。

ADPS_WebSite_33_cc

 

「テキストエディット」を起動し、新規に標準テキストを作成したら、先ほどコピーしたコードをペーストします。

ADPS_WebSite_34_cc

 

ファイルを保存しますが、拡張子を「.html」、標準テキストのエンコーディングを「Unicode(UTF-8)」とします。

テキストエディットScreenSnapz001

 

InDesignドキュメントにGoogleマップと同サイズのフレームを作成します。

InDesignScreenSnapz002

 

フレームが選択されている状態で、Folio OverlaysパネルのWebコンテンツを選びます。「URLまたはファイル」の右側のフォルダボタンをクリックし、先ほど保存したHTMLファイルを指定します。

InDesignScreenSnapz001

 

プレビューするとGoogleマップが表示されるのが確認できます。

Adobe Content ViewerScreenSnapz001

 

追記(2014.10.18)

上記の設定で上手く表示できない場合ですが、テキストエディットにGoogle Mapのコードをそのままペーストするのではなく、テキストエディットに下記のコードを入力した上でbodyタグの中にGoogle Mapのコードをペーストしてやってみて下さい。Titleタグは任意に変更して下さい。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHMLT 1.0 Transitional??EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>recurrent MAP</title>
</head>
<body>
</body>
</html>

テキストエディットに上記のタグを入力します。

ADPS_047b

bodyタグの中にGoogle Mapのコードを挿入します。

ADPS_048h

Pocket
LINEで送る

コメント

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

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Evernote
Feedly
Send to LINE