流行からだいぶ遅れて、Google Maps APIを試してみました。
APIっていうので、なんかプログラムでも書かないといけないのかね～？と思ってたのですが、なんだか、お約束のことを適当に組み合わせて書くだけでも、けっこう簡単に使えるようです。
えっと、ここから先は、ほとんどの人には関係ない話です。
このブログは、「ブログ人」ってので書いてるんですが、ブログ人でGoogle Mapsを使ってみたよん、というだけのことです。
■ Google Mapsをウェブサイトで利用することに関して、Googleの情報
とりあえず、上記のページで説明を読んでから、地図を表示したいページごとに、API Keyというのを発行してもらう必要があります。すぐにもらえます。
■ OCNの「ブログ人」でGoogle Mapsをブログに表示させる方法
ブログ人では、HTMLタグをブログで使ってもいいんですが、どうやら<SCRIPT>タグの場合は、ブログ中に書いても、削除されてしまうらしいです。
仕方ないので、Google Mapsを表示させるHTMLファイルを別途作成し、そのHTMLファイルを<IFRAME>タグで表示させることで、ブログ内でGoogle Mapsが表示できるようになりました。
一方、「私リスト」のほうでは、<SCRIPT>タグが有効なようで、そのまま書けば、そのまま表示できました。ただし、ちょっと使いづらいです。
以下、詳細。
■ ブログ人のブログの中にGoogle Mapsを表示する方法
Google Mapsを表示させるための、HTMLファイルを作成します。文字コードはUTF-8にすべきとのことです。
UTF-8でファイルを編集できるテキストエディタとして、以下を使ってみました。
Google Maps APIの使い方は、以下を参考にさせていただきました。
ちなみにGoogleのドキュメントはこちらです。
参考までに、上の東京タワーは、以下のようなファイルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=あなたが取得したAPI Keyをここに書く"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.658552,139.745407), 20);
map.openInfoWindow(map.getCenter(),
document.createTextNode("最後の審判"));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 320px; height: 320px"></div>
</body>
</html>
「コントロールパネル」の「ファイル管理」にて、作成したファイルをアップロードします。
- ブログ人にログインしてから、「コントロールパネル」をクリック
- 「ファイル管理」をクリック
- 必要に応じて、「新しいフォルダの作成」で、フォルダを作成します
- 「新規ファイルのアップロード」で、先ほど作成したHTMLファイルを指定して、アップロードします
ブログを書きます。
ブログを書くところの右上あたりにある「HTMLの編集」をクリックして、先ほどアップロードしたHTMLファイルを表示させるためのタグを書きます。たとえばこんなかんじ。
<iframe border="0" marginwidth="0" marginheight="0" src="アップロードしたファイルのURL" frameborder="0" width="330" height="330"> </iframe>
IFRAMEタグの使い方は、以下を参考にさせていただきました。
タグを書いたあと、「記事の作成」をクリックします。しばらくすると、地図が表示されます。
あとは、普通に、ブログの文章を書きます。
■ ブログ人の「私リスト」にGoogle Mapsを表示する方法
ブログ人の「私リスト」のほうでは、<SCRIPT>タグを使うことができます。だから、私リストの中でゴショゴショと一生懸命書いてやると、表示されました（今さっき気が付いたけど、こんなところに<BODY>タグを書いちゃっていいのかな？なんだかとってもイリーガルな気がします）。
ただ、「私リスト」なので、すべてのブログのページに表示されちゃうので、何に使っていいのか迷うし、少々うざったくなってしまうかもしれません。
○ 手順
「私リスト」で、新しい私リストを作ります。
- 「リストのタイプ」は「リンク」
- 「リストの名前」は、お好きな名前を
- 項目の追加にて、「リンクのタイトル」はお好きなものを、
- 「リンク先のURL」は空欄のまま、
- 「メモ」には、以下のようにGoogle Mapsを表示させるための、「お約束」を書きます。
これは、Googleでサンプルとして掲載されていたものを少し変えただけです。width、heightのところで表示サイズを調整したり、37.4419, -122.1419で、表示される場所を変更するするなどしてみてください。
<script src="http://maps.google.com/maps?file=api&v=2&key=あなたが取得したAPI Keyをここに書く"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 160px; height: 160px"></div>
</body>
- 今作成した私リストで、「設定」を選んでから、「高度な設定」の、「メモを表示」のところで、「テキスト表示する」をクリックしてから、［変更を保存］ボタンをクリック
あとは、私リストが表示されるようにします。
- ブログ一覧のページにある、「デザインを編集」をクリックします
- 次に「表示項目を変更」をクリック
- 「私リスト」のところで、先ほど作成した私リストにチェックマークをつけて、ブログに表示されるようにします
- また、必要に応じて、「デザインを編集」の中にある、「並べ方を変更」にて、私リストが表示される場所を入れ替えたりします。
というような感じです。だれでもできるくらい簡単・・・かな？
