« GoogleMapsAPIの使い方 #1 | トップページ | 温暖化はやっぱり人のせい? »

2007.02.06

GoogleMapsAPIの使い方 #2

前回の「GoogleMapsAPIの使い方 #1」の続きです。

前の記事に表示した地図はドラッグで場所を移動できるだけで、他の表示は何もできませんでした。
そこで、スクリプトにいろんな設定を足してあげれば、様々な表示が可能になります。
これが元のスクリプト。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー"
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>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 450px; height: 300px"></div>
</body>
</html>

■中心となる場所を指定する
Googlemapsで場所を調べて右上の「このページへのリンク」をクリックすると、地図のURLが出ます。
例えば東京都庁の場所はこんな感じ。(URLが長いので折り返しています)

http://www.google.co.jp/maps?ie=UTF8&om=1&z=
16&ll=35.68937,139.691763&spn=0.012199,0.02326

この「16」が縮尺を表し、「35.68937,139.691763」が緯度&経度を表しているんです。
ちなみに縮尺は「1」で世界全体が表示され、「19」が一番細かくなります。
ただし、場所によって「19」では表示されないとこがあるので気をつけてね。

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
のとこに、それぞれの数値をいれてあげれば、地図には都庁が出てきます。
map.setCenter(new GLatLng(35.68937,139.691763), 16);

■地図の表示サイズを設定
基本のスクリプトは幅450px、高さ300pxになっています。
一番下にあるスタイルの数値で好きなサイズに設定することができます。
<div id="map" style="width: 450px; height: 300px"></div>
これを
width: 400px; height: 400px
とかにすれば良い訳です。

■コントローラー(拡大率や位置を変更)を貼り付ける
上の
map.setCenter(new GLatLng(35.68937,139.691763), 16);
の次の行に、以下のスクリプトを加えると、拡大率・位置を変更するコントローラーを表示します。
大きなコントローラーは
map.addControl(new GLargeMapControl());
小さいコントローラーは
map.addControl(new GSmallMapControl());

■「マップ」と「サテライト」切り替えボタン
地図の右上に「MAP」「SATELITE」「HYBRID」というボタンを表示します。
map.addControl(new GMapTypeControl());

■デフォルトで衛星写真が表示されるように
map.setMapType(G_SATELLITE_TYPE);

■地図の真ん中に吹き出しを表示
map.openInfoWindow(map.getCenter(),
document.createTextNode("東京都庁~~!!"));

できあがったのがこれ。

http://shinobu.cocolog-nifty.com/apty/maps/maps2.html

追加または変更した場所は赤太字で表示しています。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.68937,139.691763), 18);
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.openInfoWindow(map.getCenter(),
document.createTextNode("東京都庁~~!!"));

}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

GoogleMapsAPIの使い方 #3


Google Maps Code Generator - Googleマップ自動生成ツール
自分でスクリプト書くなんて、かったりぃ(東京弁)!って人(笑)のために。
これはチョーーーー便利っ!!
世の中、こういうありがたい人がたくさんいらっしゃいますね~。

Google Maps API リファレンス
上級者向けリファレンス
私もまだ読んでないんですが、これ、全部駆使できるようになったら大変なことになりそう。

|

« GoogleMapsAPIの使い方 #1 | トップページ | 温暖化はやっぱり人のせい? »

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

コメント

都庁だぁ!!!!
これなら、道民Hachiでも分かります☆やったぁ♪

投稿: Hachi-ko | 2007.02.06 16:35

あははは、東京都庁が思いっきり叫んでますね~(笑)

スクリプトで「あれやって」「これやって」と書き込めば、こんなふうに見慣れたボタンなんかも付けられるんですね、むふ~っ!(頭からちょっと湯気が出てきました)仕事が一区切りついたらゆっくり挑戦してみようっと♪

APIを説明してる記事でちらっと見たんですけど、地図サービスのサイトにあるような「他の人が付けたマークがない」ってことが利点として挙げられるんだそうですね。でもそれは共有する情報がないということだから、かえってマイナスだという見方もあるかしら。

そんなことより、ブログに設置するこの大変さに比べると、それがどれくらいの利点なのかちょっとわからなくなっちゃうっていうのが正直なところでしょうか (^^;

でも、紹介されてるサイトの技術を駆使できれば、この地図はきっといろんな可能性を秘めてるんでしょうね~。

投稿: sumi | 2007.02.06 23:06

>Hachi-koさん
都庁、分かっていただけて良かったです~。
時節柄、東京タワーも良いかな?と思ったんだけど
あまりにベタかな、と思って(笑)。
パート3では、これにマーカーをつけて、
テキストにリンクを貼れる設定を紹介しようと思うんですが
・・・そこから先は、もうJavaScriptが分からないと難しいと思うんで
APIシリーズは3回で終わらせようかなとも思ってます。
あとはもっと頭の良い人がたくさん解説サイト作ってるし、
すでにみなさんも引き気味っぽいので(爆)。


>sumiさん
あとは住所を打ち込めばそこにジャンプしてくれたり
経度・緯度を表示したり、
この吹き出しにもタブをつけて二重にしたりもできるそうですが
二重タブがどういう時に活躍するのかちょっと不明(笑)。

「他の人がつけたマーカーがない」というのは利点というよりは特徴、でしょうね~。
それを利点にするかどうかは使い手次第、ってとこでしょうか。
まあ、このAPIの一番の利点は
いろいろ改良ができて好きな表示設定ができる、ってことでしょうね~。

例えば、1からサイトを作ろうとするとそれなりに知識が必要だけど
いろんなことができますよね。
反対にブログhtmlやFTPの知識がない人でも作れるけど
できることはだいぶ限られてくるじゃないですか。
同じようにGoogleMapsAPIは、JavaScriptの知識が必要だけど
いろんなことができる、
既成の地図作成サイトは知識は全く必要ないけど、仕様はほぼ同じ・・・。
てな感じの違いかな。
まあ、ブログ程度にペタリと貼り付ける程度の使い方なら
地図作成サイトの方がなんぼか手間いらずで楽だと思います(笑)。

投稿: しのぶ | 2007.02.06 23:38

good articles

投稿: cheap ugg boots for sale | 2013.11.07 20:53

nice articles

投稿: genuine ugg boots | 2013.11.09 14:52

コメントを書く



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




トラックバック

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

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

« GoogleMapsAPIの使い方 #1 | トップページ | 温暖化はやっぱり人のせい? »