GMap3サンプル(GMap2からの変更点)
2011/8/17 6:35:18作成
【GMap2 → GMap3(Maps Javascript API V3)のバージョンアップ変更点】
・API Keyが不要になった。
・javascriptのコード記述方法が変わった。
・ストリートビューが標準で付いてる。
・iPhone／Androidへ対応している
以上のようなことが挙げられます。
API Keyが不要であればどこでもだれでも作成が可能ということになります。javascriptのコード記述方法については、V1→V2バージョンでは大きな変更はなかったものの、V3では記述方法が異なっています。イメージ的には、細かい設定を最初に行ってから一気に表示させるような記述方法のようです。例えば、地図とかマーカーの設定がそれだと思います。あと、iPhone／Androidへの対応は試していないのでこれについてはよくわかりません。
【実際に使ってみてGMAP2と比較すると】
ストリートビューが標準で付いているので何といっても嬉しい。
マウスのホイールによって地図のズームアップ、ズームダウンがスムーズに行われる。
と感じます。以前のGMAP2には標準で付いてなかった機能ですね。
【主要なコード変更】
実際コードは以前のものとはガラッと感じが変わってしまいます。
１.文字コードの記述はＵＴＦ-８Nで記述、保存しなければ文字化けを起こしてしまい使用する事はできません。ＯＳがＭＥ以下であればメモ帳は対応していませんので、フリーソフトでも対応しているテキストエディタソフトを探せば作成する事ができます。
・サンプル地図コード
このサンプルコードをテキストエディタなどにコピーペーストし、HTMLファイルとして保存し、そのファイルをインターネットエクスプローラで地図を表示することができます。(API Keyが不要になったのでそのまま利用できます。)
ただし、保存する時にＵＴＦ-８Nの文字コードで保存する事が必要です。
２.サンプルではデフォルトのアイコンを複数表示できるようにしてあります。自分が表示したい場所の経度、緯度のデータを下記のリンク地図からポイントを探し出しクリックし取得します。
・経度緯度を求める地図
各マーカーの位置(myMarkPosition)情報ウィンドウの内容(myInfo)は配列としてあらかじめ格納しておきます。
３.地図の設定をします。サンプルコードの設定箇所にまずは地図の中心となる経度、緯度(myLatlng)と約２０段階のズームアップ度から適当な数値を設定(zoom)します。因みにサンプル地図のズームアップ度は12です。地図のタイプはサテライトに設定しています。私の好みです。普通の地図の場合はSATELLITE→ROADMAPに変更すればOKです。
// 地図の設定をします。
４.マーカーをクリックするあるいは、地名をクリックすることによって情報ウィンドウを表示させる。
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// マーカー、地名ごとに情報ウィンドウを表示させます。
５.次に各マーカーを地図に設定します。マーカーはデフォルトです。
function showInfo(marker, num){
var hyoji = function(){
myinfowindow.setContent(myInfo[num]);
myinfowindow.open(map,marker);
};
google.maps.event.addListener(marker, 'click', hyoji);
var mark_link = document.getElementById("mark_" + num );
if(mark_link){mark_link.onclick = hyoji;};
// 各マーカーを地図に設定します。
６.地図をクリックすると情報ウィンドウを閉じるようにする
for(i = 1 ; i < 5 ; i++){
var marker = new google.maps.Marker({
position:myMarkPosition[i],
map: map
});
showInfo(marker, i);
};
// 地図をクリックすると情報ウィンドウを閉じます。
以上がMaps Javascript API V3へのコードの主要な変更点です。
google.maps.event.addListener(map, 'click', function(){
myinfowindow.close(map);
});
投票数:38
平均点:4.47
