旧アクセスマップ)..." />

« GoogleとYahooのサイトオーナー向けサービス、管理しやすいのは断然やっぱりGoogleアカウント | メイン | アクセスマップをGoogle Map API V3に変更しました(作成方法解説付き☆) »

TOP> Webをカスタマイズ

Googleマップ、Google Maps API V3でアクセスマップを作ってみました

Maps API Version 2で作ったGoogleマップを、タスクマザーのアクセスページとして、設定していた(旧アクセスマップ)。
2009年5月下旬にバージョン3(Google Maps API V3)が公開になったので、早速こちらで新アクセスマップを作ってみた。

Version3での変更点

・Google Maps API Keyの取得が不要
 Keyを取得することは、設置するサイトのURLを入れるだけで発行されるので実は簡単だけど、ワンステップ作業が減るのでマル◎

・Javascript、コードの変更
 これはV1→V2からの変更時も同じだったので、サンプルなどを参照することで簡単なものはすぐに作成できる。
左上のスライダーバーが、現在、googleマップで表示されている新しいタイプに変更になっている。
ただ、ストリートビューまでは対応していないらしい。

・iPhone(GPS機能をもったもの)などのデバイスにも対応
 なるほどバージョンアップは、確かに必要だ。今後、いろいろなデバイスにも対応するさまざまなAPIが作られるんだろうな。

さて、Google Maps API V3を利用したGoogleマップ、「タスクマザー・アクセスマップ」の作成方法

Google Maps API V3ページにアクセス。
英語なのでちょっと面食らうが、英語は読まなくてもOK。
14種類のサンプルが用意されており、作りたいイメージのソースをエディタに貼り付けて改造を行う。

今回は、マーカーをオリジナルにしたかったのと、マーカーからの吹き出しを表示させたかったので、

icon-simple.htmlのソースをベースに、
infowindow-simple.htmlページ(マーカーをクリックすると吹き出しがでる)のコードを追加、改造した。

1.icon-simple.htmlのソース
------------------------
1: <html>
2: <head>
3: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4: <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5: <title>Google Maps JavaScript API v3 Example: Simple Icons</title>
6: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
7: <script type="text/javascript">
8:   function initialize() {
9:     var myOptions = {
10:      zoom: 4,
11:      center: new google.maps.LatLng(-33, 151),
12:      mapTypeId: google.maps.MapTypeId.ROADMAP
13:    }
14:    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
15:
16:    var image = 'images/beachflag.png';
17:    var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
18:    var beachMarker = new google.maps.Marker({
19:        position: myLatLng,
20:        map: map,
21:        icon: image
22:    });
23:  }
24: </script>
25: </head>
26: <body style="margin:0px; padding:0px;" onload="initialize()">
27:   <div id="map_canvas" style="width:100%; height:100%"></div>
28: </body>
29: </html>
------------------------
※行頭の1:などの行数は、ソースに含まれていない(説明のために追記)

ステップ数も29行と至ってシンプル。

6行:GPSなどの位置情報がわかるデバイスの場合は、”sensor=”をtrueにする。


10行:zoom 地図のズームレベル、数字が大きいと拡大


11行:表示させたい中央の緯度、経度を設定
 表示させたい緯度、経度を簡単に求めるツール、緯度/経度の取得~Geekなぺーじで取得すると便利。
「Geekなぺーじ」さんでは、Google Maps API V2のgoogleマップの作成方法を詳しく紹介している。V2の作成時には、いろいろ参考にさせてもらった、感謝。

もしくは、Google Maps API V3 Demo GalleryのZipCode Locatorでも、マーカーしたい位置に十字マークをあわせると、緯度・経度が表示される。

16行:マーカーに表示したい画像を、あらかじめFTPなどでアップロードしておく。


17行:マーカーを表示させたい緯度、経度を設定


27行:地図のサイズを設定したい場合は、ピクセル表示などに変更可能


2.マーカーに吹き出し(ウィンドウ)をつける場合。
22行直下(22と23の間)に以下のコードを追加する。

24-1: var infowindow = new google.maps.InfoWindow(
24-2: { content: '噴出しに表示したい文字 hogehoge・・・',
24-3: size: new google.maps.Size(200,30)
24-4: });
24-5:
24-6: google.maps.event.addListener(beachMarker, 'click', function() {
24-7: infowindow.open(map,beachMarker);
24-8: });
24-9: google.maps.event.trigger(beachMarker, 'click');


24-2行:表示させたい文字を設定、HTMLタグもOK


24-3行:ウィンドウの幅と高さ


24-9行:これを削除した場合は、マーカーをクリックすると噴出し(ウィンドウ)が表示される。


私が改造したサンプルマップは、Google Maps API V3サンプルマップにアクセスし、ソース表示を参考にして改造してください。

3.MT(MovableType)に適応させる場合
iframタグを利用して、表示させる。

以下のように、MTのコンテンツ幅におさまる大きさに地図のサイズを調整後(27行)、アップロードしたマップを設定。

------------------------

<iframe src="http://hogehoge.html" width="表示したいサイズ" height="表示したいサイズ" scrolling="NO" frameborder="0"></iframe>

------------------------

MTのブログ記事の本文フォームに上記タグを、ソース表示(タグが反映される)モード(<A>モード)に切り替えて、貼り付ける。

これでグーグルマップ by Google Maps API V3が完成。
完成したMT対応アクセスマップ

Google Maps API V2のグーグルマップは、タスクマザーの旧アクセスマップ
こちらは、maps API keyを取得して、V2のコードで作成。
V2コードは、このマップソースを参考に。

導入・設定レベル : [4]  難易度レベル4

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

トラックバック

このエントリーのトラックバックURL:
https://www.taskmother.jp/cgi-bin/taskmt/mt-tb.cgi/181