PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

Googleマップが使えるようになりました

2012年3月12日 | 森下 奈緒

シェアする

持ち歩けるスマートフォンだからこそニーズの高い機能、
Google mapsをshutto変換ページに埋め込めるようになりました。

現状はドラッグ&ドロップには対応しておりませんので、下記手順で設定をお願いします。
(今後対応していく予定です。)

1.GoogleマップのリンクURLを取得する。

http://maps.google.co.jp/にアクセスして表示したい地図箇所のリンクURLを取得します。

 
GoogleマップのHTML貼付URLを取得する

 

必要な地図部分を表示したらリンクボタンを押し、iframeからはじまるHTML貼り付け用タグをコピーします。

2.shutto変換画面にHTMLを貼り付ける

HTML入力を行うため、「header」か「text」を挿入します。

shuttoにGoogleマップタグを貼付

挿入したhtml入力枠にコピーした地図HTML貼り付け用タグを貼り付けます。

・設定例
http://shutto.com/edit/PyWAD9G
※shutto変換画面の地図外側の余白部分をクリックすると選択され、編集できます。

GoogleマップのHTML貼り付け用タグは地図部分の幅(width)が指定されますので、300px以下で設定してください。
デバイスの表示横幅を超えたwidth設定がされている場合、iphoneでは端末幅に合わせて100%表示となりますが、Androidでは横幅をはみ出してしまいますのでご注意ください。

また、Googleマップの見え方はPCとスマートフォンで異なりますので、shuttoプレビュー画面だけでなく実機でもご確認いただくことをおすすめします。

2012年8月1日 GoogleMapオブジェクトを追加しました。こちらもご参照ください。

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階