====== Google Maps API V3を使って地図をお手軽に表示 - Google Mapper V3 ======
（更新履歴とコメントは[[http://0-oo.net/log/category/javascript/google-mapper/|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。）
{{http://maps.google.com/maps/api/staticmap?center=38%2C137&zoom=5&sensor=false&size=400x460&markers=color%3Ared%7Clabel%3AA%7C%E6%9C%AD%E5%B9%8C&markers=color%3Ablue%7Clabel%3AB%7C%E4%BB%99%E5%8F%B0&markers=color%3Aorange%7Clabel%3AC%7C%E6%9D%B1%E4%BA%AC&markers=color%3Agreen%7Clabel%3AD%7C%E5%90%8D%E5%8F%A4%E5%B1%8B&markers=color%3Agray%7Clabel%3AE%7C%E5%A4%A7%E9%98%AA&markers=color%3Ayellow%7Clabel%3AF%7C%E5%BA%83%E5%B3%B6&markers=color%3Apurple%7Clabel%3AG%7C%E7%A6%8F%E5%B2%A1&.png?}}
[[https://developers.google.com/maps/|Google Maps APIのバージョン3（V3）]]が公開されたので、バージョン2用に作った[[google mapper|Google Mapper]]とは別に、Google Maps API V3用の「Google Mapper V3」を書き直した。\\
これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス（SSLで暗号化されたセキュアなページの表示）など、いろいろなことを手軽に実現できる。
（上記の画像はGoogle Maps API V3ではなく[[php-tool-box/google-maps-static-api|Google Static Maps API]]で表示している。）
===== サンプル =====
[[http://0-oo.net/sam/google-mapper/|Google Mapper V3 動作サンプル]]
[[http://0-oo.net/sam/google-mapper/geolocation.php|Google Mapper V3で現在地を取得する動作サンプル（スマートフォンにも対応）]]
[[http://0-oo.net/sam/google-mapper/drawing.php|Google Mapper V3で長方形や円や自由図形や折れ線を描くサンプル]]
[[https://0-oo.github.io/sam/google-mapper-v3-over-https.html|Google Mapper V3をHTTPSで表示するサンプル]]
[[http://0-oo.net/hotel/|ホテル 旅館 × 地図から検索]] （応用例 1）
[[http://0-oo.net/misc2/weather|天気速報 Tweets on the Map]] （応用例 2）
[[http://0-oo.net/misc2/tweetmap|なんでも速報 Tweets on the Map]] （応用例 3）
[[http://0-oo.net/misc2/100k|Flic 100K (ふりく百景)]] （応用例 4、位置情報の取得あり）
===== ライセンス =====
[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。
===== ダウンロード =====
[[http://g.0-oo.net/google-mapper-v3.js|google-mapper-v3.js]]
※ダウンロードできるのは最新のBeta版の場合もあります
===== 使い方の例 =====
Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-)
==== Google Maps APIのJavaScriptを読み込む ====
GoogleMapper.load(function() {
//読み込んだ後に行う処理
});
==== Googleマップを表示する ====
//mapIdは地図を表示するdiv等のid属性
GoogleMapper.show(mapId, lat, lng, zoom);
==== マーカーを表示する ====
GoogleMapper.addMarker(35.7, 139.7, "東京");
=== アイコン画像を指定してマーカーを表示する ===
GoogleMapper.addMarker(35.7, 139.7, "東京", iconUrl);
=== 色を指定してマーカーを表示する ===
GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0");
=== 色を指定してマーカーを表示して、その中に文字を表示する ===
GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");
=== 吹出し型のマーカーを表示する ===
GoogleMapper.addBubbleMarker(26.2, 127.7, "那覇");
==== 地図とストリートビューを並べて表示する ====
デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\
それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。
GoogleMapper.setStreetView(streetViewId);
==== 広告（Google AdSense）を表示する ====
AdSenseを表示するには、あらかじめGoogle MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定しておく必要がある。
GoogleMapper.load(function() {
GoogleMapper.show(mapDivID);
GoogleMapper.showAds("AdSenseのPublisher ID");
}, "adsense");
==== 現在位置を取得する ====
iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする？
GoogleMapper.getCurrentPosition(function(latLng) {
// （略）
});
==== 地名、駅名、施設名等から緯度経度を取得する（ジオコーディング） ====
GoogleMapper.search("静岡", function(response, status) {
if (GoogleMapper.checkResponseStatus(status)) {
var latLng = GoogleMapper.getGeocodeLatLng(response[0]);
//（以下省略）
}
});
==== 緯度経度から住所を取得する（逆ジオコーディング） ====
GoogleMapper.searchByLatLng(latLng, function(response, status) {
if (GoogleMapper.checkResponseStatus(status)) {
var address = GoogleMapper.getGeocodeAddress(response[0]);
//（以下省略）
}
});
==== 車または徒歩での道順案内を表示する ====
さらにストリートビューと合わせて見ると面白い。
var startFlg = false;
if (startFlg) { //スタート地点指定済みの場合
startFlg = false;
GoogleMapper.direct(latLng);
return "";
}
startFlg = false;
var startRouting = function(mode) {
GoogleMapper.mapClickable = false;
startFlg = true;
GoogleMapper.direct(latLng, mode, routerPanelId);
GoogleMapper.closeInfoWindow();
};
h += "
ここから次にクリックする場所までの道順を表示できます
";
var modes = {
DRIVING: "車",
//BICYCLING: "自転車", //日本は未対応
WALKING: "歩き"
};
for (var mode in modes) {
h += ' ';
}
==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ====
日本列島と一緒に沖縄も表示させたい。
GoogleMapper.showOkinawa([markers]); //あれば沖縄に表示するMarkerの配列を渡す
===== ソースコード =====
/**
* GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)
* @see http://0-oo.net/sbox/javascript/google-mapper-v3
* @version 0.7.1
* @copyright 2008-2015 dgbadmin@gmail.com
* @license http://0-oo.net/pryn/MIT_license.txt (The MIT license)
*
* See also Google Maps API V3 documents.
* @see https://developers.google.com/maps/documentation/javascript/reference
*/
var GoogleMapper = {
/** Mapオブジェクト */
map: null,
/** マーカーの配列 */
markers: [],
/** 吹き出し */
infoWindow: null,
/** Mapをクリック可能か（beClickable()内でのmapのclickイベントの制御用） */
mapClickable: false
};
/**
* Google Maps API V3のJavaScriptを読み込む
* @param Function callback 読み込み完了時に実行するCallback関数
* @param String libraries (Optional) 追加ライブラリ（複数の場合はカンマ区切り）
* @param Boolean sensor (Optional) 位置情報を使用するかどうか
*/
GoogleMapper.load = function(callback, libraries, sensor) {
GoogleMapper._onload = callback;
var params = [
"callback=GoogleMapper._onload",
"libraries=" + (libraries || ""),
"sensor=" + (sensor || false)
];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//maps.googleapis.com/maps/api/js?" + params.join("&");
document.getElementsByTagName("head")[0].appendChild(script);
};
/**
* 地図を表示する（デフォルトは日本列島）
* @param String mapId 地図表示に使う要素（div等）のid属性
* @param Number lat 中心地点の緯度
* @param Number lng 中心地点の経度
* @param Number zoom ズーム値
* @param Object options (Optional) Mapに渡すパラメータ
* @return Map
* @see https://developers.google.com/maps/documentation/javascript/reference#MapOptions
*/
GoogleMapper.show = function(mapId, lat, lng, zoom, options) {
var params = {
center: new google.maps.LatLng((lat || 38), (lng || 137.5)),
zoom: (zoom || 5),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ //コンビニ等、全ての情報を表示する
{ featureType: "all", elementType: "all", stylers: [{ visibility: "on" }] }
],
scaleControl: true,
overviewMapControl: true,
overviewMapControlOptions: { opened: true }
};
for (var i in (options || {})) {
params[i] = options[i];
}
GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), params);
GoogleMapper.infoWindow = new google.maps.InfoWindow();
return GoogleMapper.map;
};
/**
* マーカーを追加する
* マーカーをクリックするとGoogleMapper.getMarkerInfo()の内容を吹き出しに表示する
* @param Number or LatLng lat 緯度 or LatLng
* @param Number lng 経度（latにLatLngを渡す場合は不要）
* @param String title (Optional) ツールチップ表示する文字列
* @param String or MarkerImage image (Optional) マーカー画像のURL or MarkerImage
* @return Marker 追加したマーカー
*
* （参考）Google Maps用のマーカー画像の配布サイト
* @see https://mapicons.mapsmarker.com/
*/
GoogleMapper.addMarker = function(lat, lng, title, image) {
var position = lat;
if (lng) {
position = new google.maps.LatLng(lat, lng);
}
var marker = new google.maps.Marker({
map: GoogleMapper.map,
position: position,
title: (title || ""),
icon: image
});
google.maps.event.addListener(marker, "click", function() {
GoogleMapper.openMarkerWindow(marker);
});
GoogleMapper.markers.push(marker);
return marker;
};
/**
* Google Chart APIを使ってマーカー画像を生成する
* @param Number or LatLng lat 緯度 or LatLng
* @param Number lng 経度（latにLatLngを渡す場合は不要）
* @param String title (Optional) ツールチップ表示する文字列
* @param String bgColor (Optional) 背景（塗り潰し）色（例：FFFFFF）
* @param String textColor (Optional) 文字色（例：000000）
* @param String str (Optional) マーカー上に表示する文字
* @return String or MarkerImage
* @see https://developers.google.com/chart/image/docs/gallery/dynamic_icons
*/
GoogleMapper.addColorMarker = function(lat, lng, title, bgColor, textColor, str) {
var type = "d_map_pin_letter_withshadow";
var url = GoogleMapper._getIconURL(type, null, str, (bgColor || "F30"), textColor);
var image = new google.maps.MarkerImage(
url,
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34) //指定しないと影も含めてセンタリングされる
);
var marker = GoogleMapper.addMarker(lat, lng, title, image);
marker.setShape({coords: [0, 0, 20, 20], type: "rect"}); //丸い部分だけクリックできる
return marker;
};
/**
* Google Chart APIを使って吹き出し画像を生成する
* @param Number or LatLng lat 緯度 or LatLng
* @param Number lng 経度（latにLatLngを渡す場合は不要）
* @param String str 吹き出しに表示する文字列
* @param String bgColor (Optional) 背景（塗り潰し）色（例：FFFFFF）
* @param String textColor (Optional) 文字色（例：000000）
* @param String style (Optional) 吹き出し形状（尻尾無しは"bbT"）
* @return String or MarkerImage
* @see https://developers.google.com/chart/image/docs/gallery/dynamic_icons
*/
GoogleMapper.addBubbleMarker = function(lat, lng, str, bgColor, textColor, style) {
var type = "d_bubble_text_small";
style = style || "bb";
var icon = GoogleMapper._getIconURL(type, style, str, (bgColor || "FF0"), textColor);
var iconY = -1, shadowY = -1;
switch (style) {
case "bb": //左下に着地点
iconY = 35;
shadowY = 37;
break;
case "bbtl": //左上に着地点
iconY = 0;
shadowY = 0;
break;
}
if (iconY > -1) {
//位置の調整
var point = new google.maps.Point(0, iconY);
icon = new google.maps.MarkerImage(icon, null, null, point);
}
var marker = GoogleMapper.addMarker(lat, lng, str, icon);
if (shadowY > -1) {
//影を付ける
var shadowUrl = GoogleMapper._getIconURL(type + "_shadow", style, str, "");
var shadowPoint = new google.maps.Point(0, shadowY);
marker.setShadow(new google.maps.MarkerImage(shadowUrl, null, null, shadowPoint));
}
return marker;
};
/**
* Google Chart APIのDynamic IconのURLを生成する
*/
GoogleMapper._getIconURL = function(iconType, style, str, bgColor, textColor) {
var params = [style, encodeURIComponent(str || ""), bgColor, (textColor || "")];
if (!style) {
params.shift();
}
return "//chart.googleapis.com/chart?chst=" + iconType + "&chld=" + params.join("|");
};
/**
* マーカーのIndexを取得する
* @param Marker marker Indexを調べたいマーカー
* @return Number マーカーのIndex
*/
GoogleMapper.getMarkerIndex = function(marker) {
var markers = GoogleMapper.markers;
for (var i = 0, len = markers.length; i < len; i++) {
if (markers[i] == marker) {
return i;
}
}
};
/**
* マーカーを削除する
* @param Number index 削除するマーカーのIndex
*/
GoogleMapper.removeMarker = function(index) {
GoogleMapper.markers[index].setMap(null);
GoogleMapper.markers.splice(index, 1);
};
/**
* マーカーを全て削除する
*/
GoogleMapper.removeAllMarkers = function() {
for (var i = 0, len = GoogleMapper.markers.length; i < len; i++) {
GoogleMapper.markers[i].setMap(null);
}
GoogleMapper.markers = [];
};
/**
* マーカー上に吹き出しを表示する
* 表示する内容はGoogleMapper.getMarkerInfo()から取得する
* @param Marker marker 吹き出しを表示するマーカー
*/
GoogleMapper.openMarkerWindow = function(marker) {
GoogleMapper.openInfoWindow(GoogleMapper.getMarkerInfo(marker), null, marker);
};
/**
* 吹き出しに表示する内容を作る（HTML可）
* 表示したい内容がある場合、このfunctionを上書きする
* @param Marker marker 吹き出しを表示するマーカー
*/
GoogleMapper.getMarkerInfo = function(marker) {
return GoogleMapper.escape(marker.title);
};
/**
* 文字列のHTMLエスケープ
* @param String str
* @return String
*/
GoogleMapper.escape = function(str) {
var rep = { "&": "&", '"': """, "'": "'", "<": "<", ">": ">" };
return str.replace(/[&"'<>]/g, function(m) { return rep[m]; });
};
/**
* 吹き出しを表示する（latLngとmarkerはどちらか一方を渡す）
* @param String content 吹き出しの中身のHTML
* @param LatLng latLng (Optional) 吹き出しを表示する位置
* @param Marker marker (Optional) 吹き出しを表示するマーカー
*/
GoogleMapper.openInfoWindow = function(content, latLng, marker) {
if (!content) {
return;
}
var infoWindow = GoogleMapper.infoWindow;
infoWindow.setAnchor(null); //非公式APIでいったんクリア
infoWindow.setOptions({ content: content, position: latLng });
infoWindow.open(GoogleMapper.map, marker);
};
/**
* 吹き出しを閉じる
*/
GoogleMapper.closeInfoWindow = function() {
GoogleMapper.infoWindow.close();
};
/**
* 地図をクリック可能にする（ダブルクリックによるズームはできなくなる）
* @param Function callback クリック時に呼び出されるCallback関数
* クリックされた地点のLatLngが渡される
* 文字列（HTML可）を返すとそれを吹き出しに表示する
*/
GoogleMapper.beClickable = function(callback) {
//ダブルクリックはクリックイベントも発生するので無効にする
GoogleMapper.map.disableDoubleClickZoom = true;
GoogleMapper.mapClickable = true;
google.maps.event.addListener(GoogleMapper.map, "click", function(event) {
if (GoogleMapper.mapClickable) {
GoogleMapper.openInfoWindow(callback(event.latLng), event.latLng);
} else {
GoogleMapper.mapClickable = true;
}
});
};
/**
* 端末の現在位置を取得する
* @param Function onSuccess 位置取得時に実行するCallback関数
* @param Function onError (Optional) 位置取得失敗時に実行するCallback関数
* @return Boolean 位置情報を取得可能かどうか
* @see http://dev.w3.org/geo/api/spec-source.html#api_description
*/
GoogleMapper.getCurrentPosition = function(onSuccess, onError) {
if (!navigator.geolocation) {
return false;
}
navigator.geolocation.getCurrentPosition(
function(position) {
var coords = position.coords;
onSuccess(new google.maps.LatLng(coords.latitude, coords.longitude), coords);
},
onError || function(e) { alert(e.message); },
{ enableHighAccuracy: true, timeout: 10000 }
);
return true;
};
/**
* 検索ボックスに入力補完機能を付ける（要Placesライブラリ）
* @param String inputId 検索ボックスのid
*/
GoogleMapper.setAutocomplete = function(inputId) {
var ac = new google.maps.places.Autocomplete(document.getElementById(inputId));
ac.bindTo("bounds", GoogleMapper.map);
};
/**
* 地名や施設名等で検索する（ジオコーディング）
* @param String keywords 検索したいキーワード
* @param Function callback (Optional) 検索結果が渡されるCallback関数
* 渡されるのはGeocoderResponseの配列とGeocoderStatus
* @see https://developers.google.com/maps/documentation/javascript/reference#Geocoder
*/
GoogleMapper.search = function(keywords, callback) {
if (!keywords) {
return;
}
callback = callback || function(response, status) {
if (!GoogleMapper.checkResponseStatus(status)) {
return;
}
var len = response.length;
var msg = len + "件ヒットしました\n";
if (len == 1) {
var map = GoogleMapper.map;
var result = response[0];
var latLng = GoogleMapper.getGeocodeLatLng(result);
map.panTo(latLng);
if (map.getZoom() < 14) {
map.setZoom(14);
}
GoogleMapper.openInfoWindow(GoogleMapper.getGeocodeAddress(result), latLng);
return;
} else if (len < 20) {
for (var i = 0; i < len; i++) {
msg += "・" + GoogleMapper.getGeocodeAddress(response[i]) + "\n";
}
}
alert(msg + "詳細な地名を追加してください");
};
(new google.maps.Geocoder()).geocode({ address: keywords }, callback);
};
/**
* 緯度経度から地名を検索する（逆ジオコーディング）
* @param LatLng latLng 緯度経度
* @param Function callback 検索結果が渡されるCallback関数
* 渡されるのはGeocoderResponseの配列とGeocoderStatus
* @see https://developers.google.com/maps/documentation/javascript/reference#Geocoder
*/
GoogleMapper.searchByLatLng = function(latLng, callback) {
(new google.maps.Geocoder()).geocode({ latLng: latLng }, callback);
};
/**
* GeocoderStatusおよびPlacesServiceStatusをチェックする
* 該当データなし以外のエラーの場合は、alert()を表示する
* @param String status
* @return Boolean true: OK, false: OK以外
*/
GoogleMapper.checkResponseStatus = function(status) {
switch (status) {
case "OK":
return true;
case "ZERO_RESULTS":
alert("該当データがありませんでした");
break;
default:
alert("エラーが発生しました (" + status + ")");
}
return false;
};
/**
* GeocoderResponseから主な地名を取り出す
* @param GeocoderResponse geocodeResult
* @return String 地名
*/
GoogleMapper.getGeocodeAddress = function(geocodeResult) {
var address = "";
var components = geocodeResult.address_components;
for (var i = components.length - 2; i >= 0; i--) { //国名は省略
var name = components[i].long_name;
if (!name.match(/^(日本|[0-9]{3}-[0-9]{4})$/)) { //郵便番号も無視
address += " " + name;
}
}
return address.substring(1);
};
/**
* GeocoderResponseから緯度経度を取り出す
* @param GeocoderResponse geocodeResult
* @return LatLng
*/
GoogleMapper.getGeocodeLatLng = function(geocodeResult) {
return geocodeResult.geometry.location;
};
/**
* ある地点からある地点までの道順を表示する
* 1度目に出発地点、2度目に目的地のlatLngを渡す
* @param String / LatLng point 地名 or 緯度経度
* @param String mode (Optional) 移動手段（省略すると車）
* TravelModeの定数のどれか
* @param String panelId (Optional) 道順の説明を表示するdiv等のid
*/
GoogleMapper.direct = function(point, mode, panelId) {
if (!GoogleMapper._router) { //1回目の呼び出しの場合
GoogleMapper._router = { from: point, mode: mode, panelId: panelId };
return;
}
var router = GoogleMapper._router;
GoogleMapper._router = null;
var renderer = new google.maps.DirectionsRenderer({
map: GoogleMapper.map,
draggable: true
});
var panel = null;
panelId = (panelId || router.panelId);
if (panelId) { //道順の詳細を別パネルに表示する場合
panel = document.getElementById(panelId);
panel.innerHTML = "データを取得しています
しばらくお待ちください";
renderer.setPanel(panel);
}
var request = {
origin: router.from,
destination: point,
travelMode: (mode || router.mode || google.maps.TravelMode.DRIVING),
provideRouteAlternatives: true,
unitSystem: google.maps.UnitSystem.METRIC
};
(new google.maps.DirectionsService()).route(request, function(response, status) {
if (panel) {
panel.innerHTML = "";
}
if (GoogleMapper.checkResponseStatus(status)) {
renderer.setDirections(response);
}
});
};
/**
* ストリートビューを地図とは別に表示できるようにする
* @param String panelId ストリートビューを表示する場所（div等）のid属性
*/
GoogleMapper.setStreetView = function(panelId) {
GoogleMapper.map.setStreetView(new google.maps.StreetViewPanorama(
document.getElementById(panelId),
{ enableCloseButton: true, visible: false }
));
};
/**
* Google Placesに登録されているスポットを表示する（要Placesライブラリ）
* @param Number iconSize (Optional) アイコンの表示サイズ
* @see https://developers.google.com/maps/documentation/javascript/places
*/
GoogleMapper.showPlaces = function(iconSize) {
(new google.maps.places.PlacesService(GoogleMapper.map)).search(
{ bounds: GoogleMapper.map.getBounds() }, //取得対象範囲は表示中の地図
function(results, status) {
if (!GoogleMapper.checkResponseStatus(status)) {
return;
}
GoogleMapper._places = GoogleMapper._places || {};
iconSize = (iconSize || 24);
var size = new google.maps.Size(iconSize, iconSize);
for (var i = 0; i < results.length; i++) {
var place = results[i];
if (!GoogleMapper._places[place.id]) {
GoogleMapper.addPlace(place, size);
GoogleMapper._places[place.id] = true;
}
}
}
);
};
/**
* Google Placesのスポットをマーカーとして表示する
* @param PlaceResult place スポット情報
* @param Size size アイコンサイズ
*/
GoogleMapper.addPlace = function(place, size) {
var marker = new google.maps.Marker({
map: GoogleMapper.map,
position: place.geometry.location,
title: place.name,
icon: new google.maps.MarkerImage(place.icon, null, null, null, size)
});
//クリックされたら詳細ページへのリンクを表示する
google.maps.event.addListener(marker, "click", function() {
GoogleMapper.log(place.types.join());
(new google.maps.places.PlacesService(GoogleMapper.map)).getDetails(
{ reference: place.reference },
function(detail, status) {
if (!GoogleMapper.checkResponseStatus(status)) {
return;
}
var h = GoogleMapper.escape;
var url = h(detail.url.replace('com', 'co.jp')); //日本語ページにする
GoogleMapper.openInfoWindow(
'' + h(detail.name) + "",
null,
marker
);
}
);
});
};
/**
* 地図上に広告（Google AdSense）を表示する（要AdSenseライブラリ）
* @param String pubId AdSenseアカウントのサイト運営者ID
* @param AdFormat format (Optional) AdSenseの形状
* @param ControlPosition position (Optional) 地図上のどこに表示するか
* @param String channel (Optional) AdSenseのチャネル番号
* @see https://developers.google.com/maps/documentation/javascript/advertising
*/
GoogleMapper.showAds = function(pubId, format, position, channel) {
(new google.maps.adsense.AdUnit(document.createElement("div"), {
channelNumber: channel,
format: format || google.maps.adsense.AdFormat.BANNER,
map: GoogleMapper.map,
position: position || google.maps.ControlPosition.TOP_CENTER,
publisherId: pubId
}));
};
/**
* メインの地図に重ねて、右下に沖縄のミニ地図を表示
* @param Array markers (Optional) 沖縄のミニ地図に表示するMarkerの配列
*/
GoogleMapper.showOkinawa = function(markers) {
var map = GoogleMapper.map;
google.maps.event.addListener(map, "tilesloaded", function() {
google.maps.event.clearListeners(map, "tilesloaded");
//表示領域
var outer = map.getDiv().appendChild(document.createElement("div"));
outer.style.position = "absolute";
outer.style.right = 0;
outer.style.bottom = "120px"; //Overview Map Controlの分だけ空ける
outer.style.overflow = "hidden";
outer.style.width = "113px";
outer.style.height = outer.style.width;
outer.style.border = "solid 0 #eee";
outer.style.borderWidth = "6px 0 6px 6px";
//実際に地図が載るところ
var inner = outer.appendChild(document.createElement("div"));
inner.style.height = "160px";
inner.style.top = "-23px";
var okinawa = new google.maps.Map(inner, {
center: new google.maps.LatLng(26.5, 127.9), //沖縄本島の中心あたり
zoom: map.getZoom(),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true, //操作系は不可で
disableDoubleClickZoom: true,
draggable: false,
keyboardShortcuts: false,
scrollwheel: false
});
//閉じるボタン
var closeBtn = outer.appendChild(document.createElement("div"));
closeBtn.innerHTML = "×";
closeBtn.style.position = "absolute";
closeBtn.style.top = "-5px";
closeBtn.style.right = 0;
closeBtn.style.padding = "0 3px";
closeBtn.style.backgroundColor = "#eee";
closeBtn.style.cursor = "pointer";
closeBtn.onclick = function() { outer.style.display = "none"; };
//ミニ地図をクリックすると拡大してメインの地図に表示
google.maps.event.addListener(okinawa, "click", function() {
map.setCenter(okinawa.getCenter());
map.setZoom(okinawa.getZoom() + 4);
});
//メイン地図と同じ位置にマーカーを表示
if (!markers) {
return;
}
var duplicateMarker = function(origin) {
var marker = new google.maps.Marker({
position: origin.position,
title: origin.title,
icon: origin.icon,
shadow: origin.shadow
});
marker.setMap(okinawa);
google.maps.event.addListener(marker, "click", function() {
GoogleMapper.openMarkerWindow(origin);
});
};
for (var i = 0, len = markers.length; i < len; i++) {
duplicateMarker(markers[i]);
}
});
};
/**
* consoleがある場合のみ、コンソールに出力する
* @param Object value
*/
GoogleMapper.log = function(value) {
if (window.console && console.log) {
console.log(value);
}
};
/******************************************************************************
* 使用例
* GoogleMapeer.demo("gmap", "route", "keywords");
* @param String mapId 地図を表示する場所（div等）のid属性
* @param String streetViewId (Optional) ストリートビューを表示するdiv等のid属性
* @param String routerPanelId (Optional) 道順を表示する場所（div等）のid属性
* @param String keywordInputId (Optional) 検索用テキストボックスのid属性
******************************************************************************/
GoogleMapper.demo = function(mapId, streetViewId, routerPanelId, keywordInputId) {
var demo = GoogleMapper.demo;
//地図を表示（緯度経度ズームを渡さないと日本列島を表示する）
var map = GoogleMapper.show(mapId);
//マーカーを表示
var tokyo = GoogleMapper.addMarker(35.7, 139.7, "東京");
//マーカー上に吹き出しを表示
GoogleMapper.openMarkerWindow(tokyo);
//色の違うマーカーを表示
GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");
//吹き出し型のマーカーを表示
var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "<那覇>");
//沖縄のミニ地図を表示
GoogleMapper.showOkinawa([naha]);
//ストリートビューを地図とは別に表示できるようにする
GoogleMapper.setStreetView(streetViewId);
//地図上をクリック可能にする
GoogleMapper.beClickable(function(latLng) { //クリックされた時のCallback関数
//逆ジオコーディングして地名をタイトルバーに表示
GoogleMapper.searchByLatLng(latLng, function(response, status) {
if (GoogleMapper.checkResponseStatus(status)) {
document.title = GoogleMapper.getGeocodeAddress(response[0]);
}
});
//緯度・経度を吹き出しに表示
var h = "緯度: " + latLng.lat() + "
経度: " + latLng.lng();
//二つの地点間の車または徒歩の道順を表示
if (demo.startFlg) { //スタート地点指定済みの場合
demo.startFlg = false;
GoogleMapper.direct(latLng);
return ""; //この場合は吹き出し表示なし
}
demo.startFlg = false;
demo.startRouting = function(mode) {
GoogleMapper.mapClickable = false;
demo.startFlg = true;
GoogleMapper.direct(latLng, mode, routerPanelId);
GoogleMapper.closeInfoWindow();
};
h += "
ここから次にクリックする場所までの道順を表示できます
";
var modes = {
DRIVING: "車",
//BICYCLING: "自転車", //日本は未対応
WALKING: "歩き"
};
for (var mode in modes) {
h += ' ';
}
return h; //戻り値が吹き出しに表示される
});
//道順の終点はマーカーでもOKにする
var getMarkerInfo = GoogleMapper.getMarkerInfo; //オリジナルを退避
GoogleMapper.getMarkerInfo = function(marker) {
if (demo.startFlg) { //スタート地点指定済みの場合
demo.startFlg = false;
GoogleMapper.direct(marker.position);
return "";
}
return getMarkerInfo(marker);
};
//検索キーワードの入力補完（要placesライブラリ）
if (google.maps.places) {
GoogleMapper.setAutocomplete(keywordInputId);
}
//地名や施設名等で検索する（ジオコーディング）
var searchBox = document.getElementById(keywordInputId);
demo.search = function() {
GoogleMapper.search(searchBox.value);
searchBox.focus();
};
//consoleがあれば、中心点とズーム値をコンソールに表示
google.maps.event.addListener(map, "idle", function() {
var center = map.getCenter();
var latlng = "lat:" + center.lat() + ", lng:" + center.lng();
GoogleMapper.log(latlng + ", zoom:" + map.getZoom());
});
};