・
Google マップを自分のサイトに貼り付けよう(Google Japan Blog)
・
Googleマップ、ブログやWebへの組み込みが簡単に(ITMedia)
ということで、早速、利用してみました。
【1】まずはGoogleマップを貼ってみよう。⇒URL:
Googleマップへ行く。
⇒地図を自分の好きな位置・大きさにしてみる。
(私は、秋葉原を中心にしてみた。)
⇒ページの右上にある「このページのリンク」をクリックする。
⇒「HTMLを貼り付けてサイトに地図を埋め込みます」のところの「<iframe・・・」をコピペ。
(ご自分のブログやWebサイトに貼ってみてください。)

(↑画像はクリックして拡大)
↓そのままでコピペで、こんな感じになる。
拡大地図を表示↑ここまで。
これだけでデキた!
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の吹き出しが正しく表示できない
稲葉 一浩
毎日コミュニケーションズ (2006/09)
売り上げランキング: 108206
おすすめ度の平均:


Google Maps をゴリゴリいじってみたい人に