====== Google Mapsをほどよくカスタマイズしてお手軽に表示 - Google Mapper ======
（更新履歴とコメントは[[http://0-oo.net/log/category/javascript/google-mapper/|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。）
※Google Maps API V3を使いたい場合は、[[google-mapper-v3|Google Mapper V3]]をどうぞ。8-)
{{:php-tool-box:map-japan.gif|}}
Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。\\
マーカーの表示も使いたいので、配列に位置情報を入れておけばマーカーが表示できるようにした。
久しぶりにGoogle Maps APIを読み返した（意外に変わってた）ら、便利そうなライブラリ（[[http://code.google.com/p/gmaps-utility-library/|gmaps-utility-library]]）を見つけたのでついでに下記を取り込んでみた。8-)
* マーカーのアイコン画像を色を指定するだけで手軽に作成
* マーカーが表示範囲外にある場合、それが分かるように表示
バージョン0.2.0からは、左下に検索ボックスを表示するようにした。また、マウスホイールのスクロールによるズームにも対応した。
===== サンプル =====
[[http://0-oo.net/sam/google-mapper/v2.php|Google Mapper (V2) 動作サンプル]]
[[http://0-oo.net/aqua/|Japan Aquaria Map and Photos]]
[[http://0-oo.net/misc/wikipedia-map|ものすごい地図 - 伝説のリョコウバトのように日本、アメリカ、ヨーロッパ、そして世界を覆い尽くすものそれは...]]
===== 使い方の例 =====
事前にJavaScriptを読み込む。
後は表示するだけ。
//（マーカーを表示したい場合のみ）マーカーを表示する位置情報をセット
GoogleMapper.points = [
{lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true},
{lat: 35.2, lng: 136.9, title: "Nagoya"},
{lat: 34.7, lng: 135.5, title: "Osaka", soulFood: "Takoyaki"}
];
//地図を表示する要素（divなど）のidと緯度・経度・ズーム値を指定して表示する
GoogleMapper.load("map", 37, 136, 6);
===== ライセンス =====
[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。
===== ダウンロード =====
[[http://g.0-oo.net/google-mapper.js|google-mapper.js]]
※ダウンロードできるのは最新のBeta版の場合もあります
===== ソースコード =====
/**
* GoogleMapper.js - (The Wrapper Class of Google Maps API V2)
* @see http://0-oo.net/sbox/javascript/google-mapper
* @version 0.2.1
* @copyright 2008-2010 dgbadmin@gmail.com
* @license http://0-oo.net/pryn/MIT_license.txt (The MIT license)
*
* See also Google Maps API documents.
* @see http://code.google.com/intl/en/apis/maps/documentation/reference.html
*/
var GoogleMapper = {
/**
* マーカーを表示する位置情報
* （例）
* GoogleMapper.points = [
* {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true},
* {lat: 35.2, lng: 136.9, title: "Nagoya"},
* {lat: 34.7, lng: 135.5, title: "Osaka"}
* ];
* ・lat, lngは必須
* ・titleはMarkerにマウスカーソルを当てたときに表示される
* ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される
* ・iconにGIconをセットすると個別のiconを表示できる
* ・その他に getInfoHtml() で使いたいデータを入れてもOK
*/
points: [],
/**
* 地図をクリックされた時に情報Windowを表示するかどうか
* trueにすると、副作用としてダブルクリックによるズームを無効にする
*/
pointable: false,
/**
* 検索結果に表示されるAdSenseの設定
* （例）
* GoogleMapper.barAdsOptions = {
* client: "partner-pub-xxxxxxxxxxxxxxxx",
* channel: "xxxxxxxxxx"
* };
*/
barAdsOptions: {},
/** loadしたGMap2オブジェクトがセットされる */
map: null,
/** サイトごとのカスタマイズをするための関数群 */
custom: {}
};
/**
* @param String mapId 地図表示に使う要素（div等）のid属性
* @param Float lat 初期表示する中心地点の緯度
* @param Float lng 初期表示する中心地点の経度
* @param Integer zoom 初期表示するズーム値
* @param Object loadOptions （省略可）Google Mapsをload時のオプション
*/
GoogleMapper.load = function(mapId, lat, lng, zoom, loadOptions) {
// @see http://code.google.com/intl/ja/apis/ajax/documentation/#GoogleLoad
google.load("maps", "2", loadOptions);
google.setOnLoadCallback(function() {
//IEのメモリリーク対策
// @see http://code.google.com/intl/ja/apis/maps/documentation/#Memory_Leaks
document.getElementsByTagName("body")[0].onunload = GUnload;
//ブラウザが対応しているかチェック
if (!GBrowserIsCompatible()) {
GoogleMapper.custom.onUnavailable();
return;
}
var map = (GoogleMapper.map = new GMap2(document.getElementById(mapId), {
googleBarOptions: {
style: "new", //新バージョンの検索窓
adsOptions: GoogleMapper.barAdsOptions
}
}));
GoogleMapper.setupMap(map);
GoogleMapper.custom.initCallback();
//地図を表示
map.setCenter(new GLatLng(lat, lng), zoom);
//マーカーを表示
var icon = GoogleMapper.custom.getIcon();
for (var i = 0; i < GoogleMapper.points.length; i++) {
GoogleMapper.addMarker(GoogleMapper.points[i], icon);
}
});
};
/**
* 地図の表示設定をする
* @param GMap2 map
*/
GoogleMapper.setupMap = function(map) {
var ui = map.getDefaultUI();
if (ui.controls.scalecontrol) { //largeの場合のみtrueになっている
ui.controls.scalecontrol = false; //縮尺
map.enableGoogleBar(); //統合検索コントロール
map.addControl(new GOverviewMapControl()); //概観地図
}
if (GoogleMapper.pointable) {
ui.zoom.doubleclick = false; //ダブルクリックによるズーム
//地図をクリックされた時のイベント
GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) { //Windowを閉じる時のクリックは無視
map.openInfoWindowHtml(
latlng, GoogleMapper.custom.getClickInfoHtml(latlng)
);
}
});
}
map.setUI(ui);
map.enableContinuousZoom(); //滑らかなズームを有効にする
};
/**
* マーカーを追加する
* @param Object point
* @param GIcon defaultIcon
* @return GMarker
*/
GoogleMapper.addMarker = function(point, defaultIcon) {
var option = { title: point.title, icon: point.icon || defaultIcon };
var info = GoogleMapper.custom.getInfoHtml(point);
if (!info) {
option.clickable = false;
}
var marker = new GMarker(new GLatLng(point.lat, point.lng), option);
GoogleMapper.map.addOverlay(marker);
if (info) {
//クリックされたら吹き出しを表示する
GEvent.addListener(marker, "click", function(){ this.openInfoWindowHtml(info); });
if (point.openFlg) { //最初から吹き出しを表示する
marker.openInfoWindowHtml(info);
}
}
if (window["MarkerTracker"]) {
//現在の表示範囲の外にあるマーカーが分かるようにする
// @see http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/
(new MarkerTracker(marker, GoogleMapper.map));
}
return marker;
};
/******************************************************************************
* 以下はサイトに合わせて上書きする関数
******************************************************************************/
/**
* Google Mapsが使用できない環境の場合に呼ばれる
*/
GoogleMapper.custom.onUnavailable = function() {
alert("このブラウザでは地図を表示できません");
};
/**
* マーカーの画像を返す
*/
GoogleMapper.custom.getIcon = function() {
if (!window["MapIconMaker"]) {
return G_DEFAULT_ICON;
}
// @see http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/
return MapIconMaker.createMarkerIcon({
//Sample
primaryColor: "#00FFFF", strokeColor: "#666666"
});
};
/**
* マーカーに表示する吹き出しの中身のHTMLを作成して返す
* @param Object point マーカー情報
*/
GoogleMapper.custom.getInfoHtml = function(point) {
//Sample
return point.title;
};
/**
* 地図をクリックされた時に表示する吹き出しの中身のHTMLを作成して返す
* （GoogleMapper.pointable = true の場合のみ有効）
* @param GLatlng latlng 緯度経度
*/
GoogleMapper.custom.getClickInfoHtml = function(latlng) {
//Sample
var info = "緯度: " + latlng.lat() + "
経度: " + latlng.lng();
info += "
ズーム: " + GoogleMapper.map.getZoom();
return info;
};
/**
* 初期表示時のコールバック関数
*/
GoogleMapper.custom.initCallback = function() { /* pass */ };