Home > スポンサー広告 > GoogleMapをサイト・ブログに貼り付ける方法

スポンサーサイト

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

Comments: -

Comment Form
Only inform the site author.

Trackback+Pingback: -

TrackBack URL for this entry
http://kyotomemo.blog99.fc2.com/tb.php/12-400337ae
Listed below are links to weblogs that reference
スポンサーサイト from Memoのメモ

Home > スポンサー広告 > GoogleMapをサイト・ブログに貼り付ける方法

Home > web小技 > GoogleMapをサイト・ブログに貼り付ける方法

GoogleMapをサイト・ブログに貼り付ける方法

  • Posted by: tomoko
  • 2009-08-13 Thu 15:00:32
  • web小技
サイトに地図を貼りたいけれども、Google Maps APIを使いこなすのは敷居が高すぎる。
でも、Googleマップのマイマップを貼るのはちょっと格好悪い。

そういうわけで、諦めようかと思ったのですが、
IFRAMEを利用したとっても楽ちんなツールを発見しました。



GMapCreator(Google Maps簡単作成ツール)


表示したい場所やサイズを直感的にに操作できる優れものです!

初期画面



方法


まずは下準備から。


1.googleアカウント取得(こちらから)。
*gmaiにgoogleカレンダーと、googleアカウントなしが考えられない状態になってしまいました。


2.Google Maps APIのkey取得(こちらから)。

Google-Maps-API.jpg


これで準備完了。あとは、簡単です。


3.初期画面

「初期画面」から「Google Maps API key 」がメニューを選択。
「Google Maps API key 」を入力し「OK」ボタンを押して完了。

API.jpg


IFRAMEのサイズが決まっている場合は、あわせて設定できます。

サイズ


4.「コントロール」パネル

地図にどのパネルを表示するか決めます。

コントロール


それぞれの詳細は以下の通りです。
地図のサイズにあわせて、いろいろ選べます。

「全部入り」・「無し」以外のメニューは、選んだ分だけ足されていくので、
自分の好きなナビゲーションパネルだけを表示することができます。

パネル一覧


4.表示項目

GMapCreatorの画面上に表示されているGoogleMapで表示したい地域を
マウスドラックや、「+」「-」バーで選びます。

目的の場所が見つかったら、その地点を左クリック。
「マーカーを追加」などのメニューが表示されるので、
それぞれクリックして表示情報を設定します。

マーカー


5.コード生成

次に、地図の下にある「コード生成」ボタンを押すと、
GoogleMap表示用のHTMLソースコードが出力されます。


6.ページへの貼り付け

IFRAMEを利用するのが一番簡単だと思います。

完成例

まず、goolgleマップのみのページをつくるために、
新規ページ「map.html」を作成し、コードを貼り付けて保存しておきます。

そして、表示元ページの地図を表示する箇所に、以下のようなタグを追加します。

<iframe src="map.html" width="500" height="500" scrolling="NO" frameborder="0"></iframe>

*文字コードは表示元ページ・地図ページとも「UTF-8」がオススメです。

7.カスタマイズ・微調整

複数の地図で縮尺を共通にしたかったので、
生成後のソースを直接修正したりしました。

ココ を見れば、それぞれのコードが何を意味しているか、だいたい分かります。



関連サイト

  • Google Maps簡単作成ツール GMapCreator
  • Web::Blogoscope Google Maps API解説
スポンサーリンク

Comments: 0

Comment Form
Only inform the site author.

Trackback+Pingback: 0

TrackBack URL for this entry
http://kyotomemo.blog99.fc2.com/tb.php/12-400337ae
Listed below are links to weblogs that reference
GoogleMapをサイト・ブログに貼り付ける方法 from Memoのメモ

Home > web小技 > GoogleMapをサイト・ブログに貼り付ける方法

最近読んだ本

Return to page top

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