スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



[ --/--/-- --:-- ] スポンサー広告 | トラックバック(-) | コメント(-)

簡単になったGooleマップをブログに貼ってみよう 

Google マップを自分のサイトに貼り付けよう(Google Japan Blog)
Googleマップ、ブログやWebへの組み込みが簡単に(ITMedia)
ということで、早速、利用してみました。




【1】まずはGoogleマップを貼ってみよう。

⇒URL:Googleマップへ行く。

⇒地図を自分の好きな位置・大きさにしてみる。
 (私は、秋葉原を中心にしてみた。)

⇒ページの右上にある「このページのリンク」をクリックする。

⇒「HTMLを貼り付けてサイトに地図を埋め込みます」のところの「<iframe・・・」をコピペ。
 (ご自分のブログやWebサイトに貼ってみてください。)


このページへのリンク。HTMLを貼り付けるだけ。
(↑画像はクリックして拡大)


↓そのままでコピペで、こんな感じになる。


拡大地図を表示

↑ここまで。

これだけでデキた!

GoogleMaps APIをいじってた今までの苦労はなんだったんだ?!
っていうくらい簡単にGoogleMapが貼れる




【2】「地図の大きさ」と「プレビュー」で調整。

↑の【1】までのやり方だと、
 ・「地図の大きさ」が調整できない。
 ・ブログに貼るまで「どんな感じに表示されるか」がわからない。
ということになるので、
地図の大きさの変更とプレビューを以下の方法で利用できます。

⇒先ほどの「<iframe・・・」の下の部分の
 「埋め込み地図のカスタマイズとプレビュー」をクリックする。

⇒「1.カスタマイズ 地図のサイズ」で【大・中・小・カスタム(自分でサイズを決定)】
 から地図の表示サイズを選べる。

⇒「2.プレビュー」のところに、ブログなどに貼ったときと同じように、
 表示されるので、これを見ながら地図の[サイズ]・[位置]・[拡大縮小]を調節する。

⇒「3.サイトに地図を埋め込む場合はこのHTMLをコピーして貼り付けます。」
 の部分にある「<iframe・・・」をブログなどにコピペ。


↓コピペすると、こんな感じ。(幅450、高さ120の横長な地図にしてみた。)


拡大地図を表示

↑ここまで。

地図の大きさを好きに変えると、
ブログやWebのちょっとした小さな場所にも表示したり、
画面いっぱいに表示する特大な地図もデキル!!



【3】まだまだ色々できますよ。

Googleアカウントを持っていれば、さらに地図をカスタマイズできます。

Googleアカウントは、GmailなどのGoogleのサービスを利用している人はそれを利用できます。
持っていない人は、「今すぐアカウントを作成」からすぐに無料で作成できます。


マイマップで自分の地図を作成。
(↑画像はクリックして拡大)

では、進んでみましょう。

⇒Googleマップのページ左上にある「マイマップ」をクリックする。

⇒「新しい地図を作成」をクリック。

⇒Googleアカウントのログイン画面になるので、ログインする。
 (すでにログインしていれば、次の画面に行くはず。)

⇒地図を作成する画面になります。
 まずは、「タイトル」「説明」を入力。

⇒地図の中の左上のところに4つのアイコンが表示されてます。
 (これを使って、自由に地図をカスタマイズできるのです。)

以下、4つのアイコンの説明。
(地図上にあるアイコンをクリックする以外に、地図上を右クリックすることでも選択できます。)

目印、吹き出し、図形などが描けます。
(↑画像はクリックして拡大)


●『ハンドツール』
一番左側の「手」の形をしたアイコンです。
これは、通常の地図の移動のためのアイコンです。

●『目印を追加』
左から2番目の「青い水滴」のようなアイコン。
これは、地図の上に「目印」を置くためのアイコンです。
これをクリックすると、「クリックして地図の上に配置します」と出ます。
もう一度クリックすると、吹き出しが出てきます。

吹き出しの「タイトル」と「説明」が編集できます。
「説明」の編集方法は、テキスト・リッチテキスト・HTMLの3種類があります。
(リンクを貼ったり、画像を貼ったりもできます。)

●『直線を引く』
左から3番目の「線」のアイコンは、
そのままの意味で、地図上に線を引くアイコンです。

道のりを示す線などを書くことができます。
この「線」にも吹き出し(タイトル&説明)を追加できます。

●『シェイプを描く』
一番右の「図形」のアイコンは、
図形を描くアイコンです。
好きな多角形を書くことができます。

「ここからここまで俺の土地だかんなー!」とか、
「この領域は危ないから入るな!」とか、
そういうことのために使う・・・のかな?
イラストを描いてみるのもいいかもしれませんね。


完成したら、ページの右上にある「このページのリンク」をクリックして、
ブログやWebにコピペして出来上がりです。
(コピペする前に、プレビューしておくのが良いでしょう。)

↓こんな感じ。


拡大地図を表示

↑ここまで。


以上、ずいぶんと簡単になったものだ、と思いました。

上記の機能だけで十分だ、という人はこれを利用するのが良いと思います。
もっと色々したい人は、GoogleMapsAPIを利用してみてください。



●今後、調べる必要がある点

急いで作成したので、細かいところを突っ込まずに進みました。
現在、気になっている点。(ちょっと調べれば、わかることかもしれませんが。)

・吹き出しの大きさが、デフォルトで大きい。
・吹き出し内の「説明」部分のリンクをクリックすると、GoogleMapの枠内でページへ移動してしまう。




■あとねっくすブログ過去関連記事
【解決】Google Mapsの吹き出しが正しく表示できない





Google Maps API徹底活用ガイド
稲葉 一浩
毎日コミュニケーションズ (2006/09)
売り上げランキング: 108206
おすすめ度の平均: 4.0
4 Google Maps をゴリゴリいじってみたい人に




コメントの投稿














管理者にだけ表示を許可する
プロフィール

あとねっくす

Author:あとねっくす
[メールアドレス]
atnexblogあっとまーくgmail.com



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。