« Google Maps API | トップページ | GoogleMapsAPIの使い方 #2 »

2007.02.05

GoogleMapsAPIの使い方 #1

最近は「お散歩マニア」「地図日記」など、簡単にブログやサイトに地図を貼れるサービスがたくさんありますね。

どのサービスもGoogleMapsを利用してるんですが、本家GoogleMapsでも地図をサイトに貼るサービスを提供しています。
ただ、こちらは他のサービスと違って、自分である程度のスクリプトを書かなきゃならない・・・。
もちろん、その分いろんな表示設定ができるんですけどね。

Google Maps APIは、Googleアカウントを持ってる人なら誰でも設定できます。
持ってない人は アカウントを作成で作成できます。
昔は紹介制だったけど、今は誰でも作れるみたいね。

アカウントを取れたら、いよいよGoogle Maps APIを作ります。

Sign up for a Google Maps API keyに英語で何か説明が書いてありますが、読める人は読んでもらって(笑)、読めない人はスルーして(笑)一番下までスクロールしましょう。
「I have read and agree with the terms and conditions」にチェックを入れて
「My web site URL」のとこに自分のサイトのURLを入力。
「Generate API Key」をクリック。
ログイン画面に切り替わるので、自分のGmailアドレスとパスワードを入力。

自分のAPI keyとホームページのURL、そしてスクリプトの基本形が表示されます。
APIkeyはものすごく長いので覚えるのはまず不可能。
テキストファイルなどで保存しておきましょう。

このスクリプトを基本に、自分で好きな設定をしていく訳ですが、ここで重要な問題点がひとつ。
API Keyはさっき登録したURLでしか使えません。
そして、ブログは記事のURL(私の場合はhttp://shinobu.cocolog-nifty.com/apty/)と、管理画面のURL(ココログの場合はhttps://app.cocolog-nifty.com/t/app)が違いますよね。
つまり、管理画面でこのスクリプトを記述すると「このURLでは使えません」とメッセージが出てしまうのです。
FTPで直接サーバーにアップできるサイトと違って、ブログは微妙なとこが面倒なんですね・・・。

ではどうすればブログで表示できるのか。

スクリプトをHTMLファイルにして自分のブログ内にアップし、それをiframeで記事内に呼び出すのです。
前回の記事に掲載したベルサイユ宮殿の地図はこのhtmlファイルに作りました。
http://shinobu.cocolog-nifty.com/apty/maps/googlemapsapi.htm
そして記事内にiframeで呼び出しました。
私の場合はこんな感じ。
<iframe src="http://shinobu.cocolog-nifty.com/apty/maps/googlemapsapi.htm"
frameborder="0" width="420" scrolling="no" height="320"></iframe>
注:ここでは記事幅の関係上、あえて2行で書いてますが、実際は改行しないで書いてくださいね。

どうだ!面倒でしょ~~~(笑)。
地図製作サイト様バンザイ。


Google Maps APIのスクリプトは、コーディングソフトでいじってもいいし、テキストエディタでも加工できます。
ソフトはいろんな種類があるので、ここではテキストエディタで作る方法を書きます。

スクリプトをそのままメモ帳などのエディタにコピペしてテキスト形式で保存。
できたファイルを「名前を変更」でHTML形式にしちゃいます。
「拡張子を変更すると、ファイルが使えなくなる可能性があります」とメッセージが出ますが、気にしないで(笑)「はい」をクリック。
するとファイルがブラウザのアイコンに変わりました。
このファイルを開くと、どっかの外国のmapが出ましたね。
Google本社かなと思ったら、その近所の公園の場所みたい、Google社員のお気に入りパークなのかな?

それは良いとして、このままだとドラッグで場所の移動はできるけど、縮尺の変更や、衛星写真の表示などは全然できません。
次回はこの地図で任意の場所や縮尺、画面の切り替えなどの表示方法を紹介します。

GoogleMapsAPIの使い方 #2
GoogleMapsAPIの使い方 #3

|

« Google Maps API | トップページ | GoogleMapsAPIの使い方 #2 »

ウェブログ・ココログ関連」カテゴリの記事

コメント

こんばんは☆

凄ぃぃっ♪の一言です♪
確かに面倒そうだけど、プロフィールなんかの欄に使ったら楽しそうですよねぇ♪
自分の家はここです♪
みたいな感じで(笑)
あっ、それやったら身元バレるかぁ!!!!笑
自分の家はここらへんです♪
ぐらいにしておけば面白いかもしれませんねぇ♪

投稿: Hachi-ko | 2007.02.05 19:26

超コメントと関係ないこと書きます。。。
今SHINO様のプロフを見ていたら、なんと
スタバ派なんですねぇ!!!!!!!!!!!
Hachiはタリーズ派です。。。
どーでもぃぃでーすょー♪って感じで、ヒカルです↓

北海道のスタバはタバコ吸えないんですよ、テラスがなくて。。。
寒いから??笑
一店舗だけあるんですが、1席、2席の世界で。。。
だから、喫煙ブースのあるタリーズへ。。。

タバコやめよっかなぁ。。。

投稿: Hachi-ko | 2007.02.05 19:31

おや? 私、グーグルのアカウントを持ってるみたいですよ? (・・;←おい

そうかそうするとAPIというものを作るのは簡単なんですね~。要は度胸と見ました(笑)そして、ブログにアップするのは… 根性かな。それよりも忍耐力か。いや、知力も少しいるのか(汗)

投稿: sumi | 2007.02.05 22:41

>Hachi-koさん
GoogleMapsAPIなら、最寄り駅から自宅までの道筋も書けますよ(笑)。
身元どころか住所がバレバレですけどねっ。

おいしいレストランの場所とか、
「こんなとこに旅行に行ったよ」って紹介するには
なかなか使えそうですね~。
ただ、HTMLファイルを作ってアップして、そいつをiframeで呼び出すという
なんとも複雑な手順が必要になるので
もっとサクッとできる地図作成サイトがたくさんある今は
こんな面倒な方法はあまり意味がなさそうな気もします。
んでも、なんとなく余計な広告が入らない分、
ちょっとカッコ良さそうな雰囲気はありますね、あくまでなんとなく、ですけど(笑)。

んで、そうそう!実は私はスタバ中毒なのですよ~。
と言っても、基本的にはお店ではあまり飲まないです。
豆を買って帰ったり、タンブラーに入れてもらって持ち帰ったり、ですね~。
んでも、タリーズのエスプレッソも大好き!
濃いコーヒーが大好きなのです。

あ、東京ではスタバもタリーズも店内禁煙ですよ。
外にテラスがあって、そこだけ灰皿が置いてありますが
この寒風吹きすさぶ中では、かなりツライですね~。
昼間の暖かい時間ならポカポカして気持ちよいですけどね。
スタンド系のコーヒーショップで店内でタバコ吸えるのって
ドトールくらいじゃないかしら・・・。


>sumiさん
おっ、sumiさんもアカウント持ってらしたんですねっ。
それなら話は早いぞ~。
ブログにアップするには、とにかく手間ですよ手間っ(爆)。
別ファイルに地図を作ってアップして、それにリンク貼って・・・
その作業がどうにもこうにも、って感じで
こりゃそう何個もやれる作業じゃないですね(笑)。
んでも、自分用のテンプレートを作ってしまえば
次の地図は簡単に作れるようになる・・・かも????

投稿: しのぶ | 2007.02.06 01:17

その”なんとなく”って分かる気がしますょ。
やっぱり広告入ってないほうが見た目も良いし、Hachiもそっちのほうが好きだなぁ、面倒でも♪
ちょっと今度やってみます、挑戦して爆死したら助けてくださぃ(笑)

最寄の駅までの道筋までも書けちゃうのですかぁ!!!
Mapツール使ったことないから、全然知識ないですょ。。。
凄い時代ですねぇ。。。
”美味しいお店に行きました!!”
”ここなんです!!”
みたいな感じは、めっちゃありですよねぇ♪
地元の人が見たら”ここかぁ!!”と思って行くだろうし、
地元の人じゃなくても、地図があるから、行けそうな気にもなるし☆
ただ、住所書いてるより良いですよねぇ♪親切で☆ぅんぅん。

ぃやぁ!!さすが、SHINO様です☆
タリーズのエスプレッソは美味しいですよねぇ!!!♪♪
Hachiも好きなんです☆
飲み始めたの最近なんですけど。。。
それまでは、アマーィやつばっかりでした(笑)アイスモカみたいの。
生クリームどっさり系ですょ(笑)でも、それは卒業しました♪

豆を買うんですかぁ!!!!職人だぁ!!!!

投稿: Hachi-ko | 2007.02.06 16:33

>Hachi-koさん
まあ、なんだかんだ言ってこのAPIの利点は
いろいろ改良ができて好きな表示設定ができる、ってことでしょうね~。
きっとこれって、エディタでhtmlをタグ打ちするようなもんだとも思うんですよ。
それに対するコーディングソフトが、
今いろいろある地図作成サイトにあたるのかなと。
コーディングソフトがあまり優秀でなかった時代は
タグ打ちした方が正確なサイトが作れたし
JavaScriptやCSSも好きなように設定できたけど
今はコーディングソフトでもスクリプト書けるようになったじゃないですか。
だから、こんな面倒な手順で地図を作るのは
今となっては時代遅れ、なのかも知れませんね~。


>>飲み始めたの最近なんですけど。。。

私の方がエスプレッソについては先輩、ですねっ(笑)。
エスプレッソマシンが日本ではちょっと前まで全然売ってなくて
(何十年前の話だ・・・)
アメリカに旅行に行ったときに、やっとみつけたマシンを買ったんですよ。
だけどね、アメリカと日本って電気の規格が違うじゃないですか・・・。
巨大なマシンをなんとか家まで持ってかえって
コンセントさしたら、動かないでやんの~~~っ!!(涙)
ええ、もう、一度も使わずに粗大ゴミとして処分しましたよ(涙)。
今はどこの電気屋さんでも売ってますもんね、
文明の進化ってすばらしい・・・。

投稿: しのぶ | 2007.02.06 23:26

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/13798435

この記事へのトラックバック一覧です: GoogleMapsAPIの使い方 #1:

» Googlemaps [日々歳々]
世界中のあちこちを見て回るのが楽しいGooglemaps、これをブログにはりつけ [続きを読む]

受信: 2007.02.06 01:02

« Google Maps API | トップページ | GoogleMapsAPIの使い方 #2 »