(更新履歴とコメントはGoogle Mapper Archive - ゼロと無限の間のログでどうぞ。)
Google Maps APIのバージョン3(V3)が公開されたので、バージョン2用に作ったGoogle Mapperとは別に、Google Maps API V3用の「Google Mapper V3」を書き直した。
これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。
(上記の画像はGoogle Maps API V3ではなくGoogle Static Maps APIで表示している。)
Google Mapper V3で現在地を取得する動作サンプル(スマートフォンにも対応)
Google Mapper V3で長方形や円や自由図形や折れ線を描くサンプル
Google Mapper V3をHTTPSで表示するサンプル
ホテル 旅館 × 地図から検索 (応用例 1)
天気速報 Tweets on the Map (応用例 2)
なんでも速報 Tweets on the Map (応用例 3)
Flic 100K (ふりく百景) (応用例 4、位置情報の取得あり)
MITライセンスで。
※ダウンロードできるのは最新のBeta版の場合もあります
Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。
GoogleMapper.load(function() { //読み込んだ後に行う処理 });
//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);
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 += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />"; var modes = { DRIVING: "車", //BICYCLING: "自転車", //日本は未対応 WALKING: "歩き" }; for (var mode in modes) { h += '<input type="button" value="' + modes[mode] + 'の場合"'; h += ' onclick="startRouting('; h += 'google.maps.TravelMode.' + mode + ')" /> '; }
日本列島と一緒に沖縄も表示させたい。
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 = "データを取得しています<br />しばらくお待ちください"; 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( '<a href="' + url + '" target="_blank">' + h(detail.name) + "</a>", 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() + "<br />経度: " + 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 += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />"; var modes = { DRIVING: "車", //BICYCLING: "自転車", //日本は未対応 WALKING: "歩き" }; for (var mode in modes) { h += '<input type="button" value="' + modes[mode] + 'の場合"'; h += ' onclick="GoogleMapper.demo.startRouting('; h += 'google.maps.TravelMode.' + mode + ')" /> '; } 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()); }); };