オープンマインドノート

のろのろウェブログ改め。アサハカナコトヲボヤキマス。


フィードメーター - のろのろウェブログ

スポンサーサイト

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



2009/07/30 [Thu]

Google Maps APIを使ってみた。

今さらながらGoogle Maps APIを使ってみた。
左にテストで置いてみた。
なんとなく西荻窪。

結構簡単だったけど一応メモを書いておく。

手順

1.keyの取得
Google Mapsの申し込みページで
Googleのアカウントを入れて、keyを取得する。
http://www.google.com/apis/maps/

2.地図の埋め込み設定

以下サンプルですが



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&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.703842, 139.599361), 16);
}
}

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


<head>~ </head>の間に

<script src="http://・・・> ~  </script>

を入れて、

<body onload="load()" onunload="GUnload()">
赤色の部分をつけたして、

<div id="map" style="width: 200px; height: 200px"></div>

を <body>~</body>に埋め込む。

3.調整
map.setCenter(new GLatLng(35.703842, 139.599361), 16);
map.setCenter(new GLatLng(  緯度  ,   経度  ), 拡大具合);

 緯度・経度はgeocodingで住所から調べだす。

 地図の拡大具合は0~20の数値だそうです。(0~17という噂もあり。)

他にもいろいろな機能を追加できるので、参考URLを活用してみてください。

【参考URL】
http://googlemaps.googlermania.com/
http://cubelabo.blog110.fc2.com/blog-entry-103.html
http://www.geocoding.jp/
スポンサーサイト



この記事へのコメント

ズームレベルの件

ズームレベルは必ず20とか17とか言うわけではなく、地域によってバラつきがありますよ。

都市部はズームレベルが高いことも多いですが、離島や田舎になるほど、最大のズームレベルが低くなります。
日本国内においては、ほぼ全部の地域で0~17のズームレベルは確保されていますよ。

Re: ズームレベルの件

>Masashi.K さん
あ、http://googlemaps.googlermania.com/の中の方ですね。
ズームレベルの件、ご指摘補足ありがとうございます!!
たしかに拡大してもぼんやりしたりしますもんね・・・。
僕の実家とか田舎過ぎてマップモードでも何にも表示しませんしね・・。
勉強になりました!

コメントを投稿する


管理者にだけ表示を許可する

この記事のトラックバックURL

http://noro0.blog25.fc2.com/tb.php/384-49fb2fbe

この記事へのトラックバック

 | HOME | 

まいくろあど

ためしに貼ってみたよ。よろしければクリックしてみてください。

マップのテスト

ブログ内検索

今読んでるか読みおわったか

おまかせ

リンク

ブログセンター
人気ブログランキングへ
テクノラティ
にほんブログ村 ネットブログへ

ブログランキング【くつろぐ】
track feed のろのろウェブログ

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