[Google Maps] [Yahoo!地図] をページに挿入する方法 / ホームページビルダー

3月 05, 2010
BESTグループ
[Google Maps] [Yahoo!地図] をページに挿入する方法を教えてください。/ホームページビルダー

ご質問にお答えします。

ホームページビルダー13から[GoogleMaps]と[Yahoo!地図]の連携に対応し
ビルダー上の操作で簡単に地図を挿入できるようになりました。

【機能の内容】

下は実際にYahoo!地図を利用して富士山周辺の航空写真を挿入したものです。
世界全体が確認できる縮尺から家が確認できるような縮尺まで自由に設定でき
お店の紹介や、世界のニュースを伝えるなど様々なものに使えそうです。

【アカウントの作成】

[Google Maps]の場合、Maps APIキーというものが、[Yahoo!地図]の場合は
アプリケーションIDというものを取得する必要があります。
どちらも無料で作成できるアカウントが必要ですが、どちらかを既に持っている
場合は数秒で取得できます。

・ Google アカウントを作成
・ Yahoo! JAPAN IDの登録

【Maps APIキー および アプリケーションID の取得 】

[挿入] → [マップ] から挿入したいサービスを選択します。
例として説明では Yahoo!地図を選択しました。

すると下のようなウィンドウが表示されますので、まだアプリケーションIDを
取得していない場合は以下のボタンをクリックします。
後はどのようなサイトで使用するのか、どのような目的で使用するのかを
入力するページになりますので、入力していきます。

注意事項などを必ず読んでおいて下さい。

取得が完了すると最後のページにアプリケーションIDが表示されますので、
これをコピーして以下のフォームに貼り付けます。
アプリケーションIDは非常に長いので、コピーして貼り付けた方が確実です。

入力したらOKを押すと地図を操作する画面が表示されます。
ページ編集画面で予め挿入したい位置をクリックしておき、その後に
[挿入] → [マップ] から操作していくとクリックした位置に挿入できます。

一旦入力が終われば次回以降入力の必要は無く、ビルダー上だけで
操作を行う事ができます。

【地図の操作】

マウスで操作していってもいいですし、地図検索 から地名などを入れて
探しても結構です。(今回は 富士山 と入力して探しました)

地図のほか航空写真も挿入できるので、この画面で見ているだけでも
面白いです。

貼り付けたい位置が表示できたら地図の大きさなどを確認して[OK]を押して完了です。

No comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>