Google Maps for Blog Editorで地図を挿入する(Ver.1.3.3.0)
| 日光 Latitude : 36.747192 Longitude : 139.622108 |
この機能を利用するには、Google Maps APIキーを取得しておく必要があります。Google Maps APIキーは、次のページで取得できます。
http://www.google.com/apis/maps/
英語のページですが、取得は難しくありません。取得するときはブログのURLを指定します。1つのキーと1つのURLが対応していて、そのキーを使って登録したブログかどうかがチェックされ、正しければ地図が表示される仕組みになっています。
次に、以下のページからGoogle Maps for Blog Editorのファイル（zipファイル）をダウンロードします。ダウンロードするには、xfy Communityへの登録（無料）が必要となります。
https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=108&lid=128
ダウンロードして、解凍したら、解凍で得られた「blog-gmap.xvcd」というファイルを、xfy Blog Editorをインストールしたフォルダにある「scripts」フォルダにコピーします。このあたりは、「ユーザーコマンドを使ってみよう～Image Thumbnail for Blog Editorを例に」とまったく同じです。
次に、テキストエディタで「blog-gmap.xvcd」を開き、23行目に取得したAPIキーを入力します（次の赤い箇所）です。
22: <!-- Google -->
23: <xvcd:user-data name="gapi_appkey" value="your Maps API key"/>
あとは、xfy Blog Editorを起動して、［ブログ－ユーザーコマンド管理］で「blog-gmap.xvcd」を登録します。コマンド名は「Google Maps」でよいでしょう。このあたりの手順は、「ユーザーコマンドを使ってみよう～Image Thumbnail for Blog Editorを例に」とまったく同じなので、そちらを参照してください。
登録が完了してxfy Blog Editorを再起動したら、準備完了です。以下に具体的な使い方を紹介します。
▼1.地図を挿入したい位置にカーソル置いたら、［拡張コマンド－Google Maps］を選択します。［Google Maps］ダイアログボックスが開きます。
▼2.［住所、場所を入力］の入力欄に表示したい場所、住所などを入力して［検索・緯度を取得］ボタンをクリックします。ここでは「日光」と入力しています。入力した地名によってはうまくいかない場合もありますので、その場合は地名を変えて試してみましょう。
▼3.［緯度］と［軽度］が取得できたら、［マップ種類］で地図の種類（通常の地図／航空写真）、［ズーム］で表示倍率（大きい数値ほど拡大されます）、［地図の幅］、［地図の高さ］を指定して［地図のプレビューを取得］ボタンをクリックします。
▼4.プレビューが表示されたら［OK］ボタンをクリックします。なお、地図の種類で「航空写真」を選択してもプレビューには反映されないようです（ズームや幅、高さは反映されます）。
▼5.編集画面に地図が挿入されます。ただし、編集画面上では地図は表示されず、薄い紫のエリアとして表示されます。
▼6.［保存/サーバーへ反映］ボタンをクリックしてサーバーに保存します。
▼7.ブラウザを起動して表示を確認します。
▼8.［航空写真］ボタンをクリックすると、航空写真にも切り替えられます。地図をドラッグして移動したり、左側のスライダーで表示倍率を変更することもできます。
【参考】
ユーザーコマンドを使ってみよう～Image Thumbnail for Blog Editorを例に
このページは xfy Blog Editor を利用して作成されました。
コメント