ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper-v3 [2011/03/03 23:07]
dgbadmin [Google Mapを表示する]
javascript:google-mapper-v3 [2015/09/22 14:38] (現在)
dgbadmin [ソースコード] 0.7.1
ライン 3: ライン 3:
 (更新履歴とコメントは[[http://​0-oo.net/​log/​category/​javascript/​google-mapper/​|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。) (更新履歴とコメントは[[http://​0-oo.net/​log/​category/​javascript/​google-mapper/​|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。)
  
-{{:php-tool-box:​map-japan.gif|}}+{{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?}}
  
-[[http://code.google.com/​intl/​ja/​apis/maps/​documentation/​v3/|Google Maps APIのバージョン3(V3)]]が公開されたので、[[google mapper|Google Mapper]]もそれに対応せてみた。+[[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は<​del>​まだLabs版でV2に比べて実装されている機能が少い</del>​公式版になったけどまだV2の全ての機能を実装していないの、元のGoogle Mapperは残してて、それとは別に新しくGoogle Mapper V3を書き直した+(上記の画像はGoogle Maps API V3はなく[[php-tool-box/google-maps-static-api|Google Static Maps API]]表示してい
  
  
ライン 13: ライン 14:
 [[http://​0-oo.net/​sam/​google-mapper/​|Google Mapper V3 動作サンプル]] [[http://​0-oo.net/​sam/​google-mapper/​|Google Mapper V3 動作サンプル]]
  
-[[http://​0-oo.net/​hotel/​|ホテル 旅館 × 地図から検索]] (応用例)+[[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、位置情報の取得あり
  
  
ライン 21: ライン 34:
  
 ===== ダウンロード ===== ===== ダウンロード =====
-[[http://​0-oo.googlecode.com/​svn/​google-mapper-v3.js|google-mapper-v3.js]]+[[http://g.0-oo.net/​google-mapper-v3.js|google-mapper-v3.js]]
  
 ※ダウンロードできるのは最新のBeta版の場合もあります ※ダウンロードできるのは最新のBeta版の場合もあります
ライン 28: ライン 41:
 ===== 使い方の例 ===== ===== 使い方の例 =====
  
-==== 準備 ====+Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-)
  
-<​code ​html+==== Google Maps APIのJavaScriptを読み込む ==== 
-<script type="​text/​javascript"​ src="​http://​maps.google.co.jp/maps/api/​js?​sensor=false"></​script>​ +<​code ​javascript
-<script type="​text/​javascript"​ src="/​path/​to/​your/​google-mapper-v3.js"></​script>​+GoogleMapper.load(function() { 
 +    ​//読み込んだ後に行う処理 
 +});
 </​code>​ </​code>​
- 
- 
-あとは、ソースコードの中のGoogleMapper.demo()を参考に。 ;-) 
- 
-例えばこんなことができる。 
  
 ==== Googleマップを表示する ==== ==== Googleマップを表示する ====
ライン 51: ライン 61:
 </​code>​ </​code>​
  
-==== アイコン画像を指定してマーカーを表示する ​====+=== アイコン画像を指定してマーカーを表示する ===
 <code javascript>​ <code javascript>​
 GoogleMapper.addMarker(35.7,​ 139.7, "​東京",​ iconUrl); GoogleMapper.addMarker(35.7,​ 139.7, "​東京",​ iconUrl);
 </​code>​ </​code>​
  
-==== 色を指定してマーカーを表示する ​====+=== 色を指定してマーカーを表示する ===
 <code javascript>​ <code javascript>​
 GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0"​);​ GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0"​);​
 </​code>​ </​code>​
  
-==== 色を指定してマーカーを表示して、その中に文字を表示する ​====+=== 色を指定してマーカーを表示して、その中に文字を表示する ===
 <code javascript>​ <code javascript>​
 GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0",​ "​000",​ "​虎"​);​ GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0",​ "​000",​ "​虎"​);​
 </​code>​ </​code>​
  
-==== 吹出し型のマーカーを表示する ​====+=== 吹出し型のマーカーを表示する ===
 <code javascript>​ <code javascript>​
-var naha = GoogleMapper.addBubbleMarker(26.2,​ 127.7, "​那覇"​);​+GoogleMapper.addBubbleMarker(26.2,​ 127.7, "​那覇"​);​
 </​code>​ </​code>​
  
-==== 日本列島表示時にちょうどよい沖縄のミニ地図を表示する ====+==== 地図とストリートビュー並べて表示する ==== 
 +デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\ 
 +それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。
 <code javascript>​ <code javascript>​
-GoogleMapper.showOkinawa();+GoogleMapper.setStreetView(streetViewId);
 </​code>​ </​code>​
  
-==== ジオコーディングして地名タイトルバーに表示する ====+==== 広告(Google AdSense)を表示する ==== 
 +AdSenseを表示するには、あらかじめGoogle MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定しておく必要がある。 
 +<code javascript>​ 
 +GoogleMapper.load(function() { 
 +    GoogleMapper.show(mapDivID);​ 
 +    GoogleMapper.showAds("​AdSenseのPublisher ID"​);​ 
 +}, "​adsense"​);​ 
 +</​code>​ 
 + 
 +==== 現在位置を取得する ==== 
 +iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする? 
 +<code javascript>​ 
 +GoogleMapper.getCurrentPosition(function(latLng) { 
 +    // (略) 
 +}); 
 +</​code>​ 
 + 
 +==== 地名、駅名、施設名等から緯度経度を取得する(ジオコーディング) ==== 
 +<code javascript>​ 
 +GoogleMapper.search("​静岡",​ function(response,​ status) { 
 +    if (GoogleMapper.checkResponseStatus(status)) { 
 +        var latLng = GoogleMapper.getGeocodeLatLng(response[0]);​ 
 +        //​(以下省略) 
 +    } 
 +}); 
 +</​code>​ 
 + 
 +==== 緯度経度から住所取得する(逆ジオコーディング) ​====
 <code javascript>​ <code javascript>​
 GoogleMapper.searchByLatLng(latLng,​ function(response,​ status) { GoogleMapper.searchByLatLng(latLng,​ function(response,​ status) {
     if (GoogleMapper.checkResponseStatus(status)) {     if (GoogleMapper.checkResponseStatus(status)) {
-        ​document.title ​= GoogleMapper.getGeocodeAddress(response[0]);​+        ​var address ​= GoogleMapper.getGeocodeAddress(response[0]);​ 
 +        //​(以下省略)
     }     }
 }); });
 </​code>​ </​code>​
  
-==== 二つの地点間の車または徒歩の道順を表示する ====+==== 車または徒歩の道順案内を表示する ==== 
 +さらにストリートビューと合わせて見ると面白い。
 <code javascript>​ <code javascript>​
-if (GoogleMapper.demo.startFlg) { //​スタート地点指定済みの場合 +var startFlg = false; 
-    ​GoogleMapper.demo.startFlg = false;+ 
 +if (startFlg) { //​スタート地点指定済みの場合 
 +    startFlg = false;
     GoogleMapper.direct(latLng);​     GoogleMapper.direct(latLng);​
     return "";​     return "";​
 } }
  
-GoogleMapper.demo.startFlg = false;+startFlg = false;
  
-GoogleMapper.demo.startRouting = function(mode) {+var startRouting = function(mode) {
     GoogleMapper.mapClickable = false;     GoogleMapper.mapClickable = false;
-    ​GoogleMapper.demo.startFlg = true;+    startFlg = true;
     GoogleMapper.direct(latLng,​ mode, routerPanelId);​     GoogleMapper.direct(latLng,​ mode, routerPanelId);​
     GoogleMapper.closeInfoWindow();​     GoogleMapper.closeInfoWindow();​
ライン 112: ライン 155:
 for (var mode in modes) { for (var mode in modes) {
     h += '<​input type="​button"​ value="'​ + modes[mode] + '​の場合"';​     h += '<​input type="​button"​ value="'​ + modes[mode] + '​の場合"';​
-    h += ' onclick="​GoogleMapper.demo.startRouting(';​ +    h += ' onclick="​startRouting(';​ 
-    h += '​google.maps.DirectionsTravelMode.' + mode + '​)"​ /> ';+    h += '​google.maps.TravelMode.' + mode + '​)"​ /> ';
 } }
 </​code>​ </​code>​
  
-==== 地名や施設名等で検索する(ジオコーディング) ​====+==== 日本列島の図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ==== 
 +日本列島と一緒に沖縄も表示させたい。
 <code javascript>​ <code javascript>​
-function search(keywordInputId) { +GoogleMapper.showOkinawa([markers]); //あれば沖縄に表示するMarker配列
-    var searchBox = document.getElementById(keywordInputId);​ +
-    ​GoogleMapper.search(searchBox.value); +
-    searchBox.focus();​ +
-}; +
-</code> +
- +
-==== 広告(Google AdSense)を表示する ==== +
-<code javascript>​ +
-GoogleMapper.showAds("​AdSenseのPublisher ID"​);​ +
-</code> +
- +
-なお、AdSenseを表示するには、Google MapsJavaScriptの読み込みでライブラリとしてAdSense指定る必要がある。 +
-<code html> +
-<script type="​text/​javascript"​ src="​http://​maps.google.co.jp/​maps/​api/​js?​sensor=false&​amp;​libraries=adsense"></​script>​ +
-<script type="​text/​javascript"​ src="​google-mapper-v3.js"></​script>​+
 </​code>​ </​code>​
  
ライン 143: ライン 172:
  ​* ​ GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)  ​* ​ GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)
  ​* ​ @see       ​http://​0-oo.net/​sbox/​javascript/​google-mapper-v3  ​* ​ @see       ​http://​0-oo.net/​sbox/​javascript/​google-mapper-v3
- ​* ​ @version ​  0.4.0 + ​* ​ @version ​  0.7.1 
- ​* ​ @copyright 2008-2011 dgbadmin@gmail.com+ ​* ​ @copyright 2008-2015 dgbadmin@gmail.com
  ​* ​ @license ​  ​http://​0-oo.net/​pryn/​MIT_license.txt (The MIT license)  ​* ​ @license ​  ​http://​0-oo.net/​pryn/​MIT_license.txt (The MIT license)
  *  *
  ​* ​ See also Google Maps API V3 documents.  ​* ​ See also Google Maps API V3 documents.
- ​* ​ @see http://code.google.com/​intl/​ja/​apis/​maps/​documentation/​javascript/​ + ​* ​ @see https://developers.google.com/​maps/​documentation/​javascript/​reference
- ​* ​ @see http://​code.google.com/​intl/​en/​apis/​maps/​documentation/​javascript/​reference.html+
  */  */
 var GoogleMapper = { var GoogleMapper = {
     /** Mapオブジェクト */     /** Mapオブジェクト */
     map: null,     map: null,
-    ​+    ​/** マーカーの配列 */ 
 +    markers: [], 
 +    /** 吹き出し */ 
 +    infoWindow: null,
     /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */     /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */
-    mapClickable:​ false, +    mapClickable:​ false 
-     +}; 
-    /** 最後開いた吹き出しオジェクト ​*/ +/** 
-    ​lastInfoWindow:​ null+ ​* ​ Google Maps API V3のJavaScriptを読み込む 
-     + ​* ​ @param ​ Function ​   callback ​   読み込み完了時実行するCallback関数 
-    /** 地名による検索時にリスト表示する最大件数 *+ ​* ​ @param ​ String ​     libraries ​  ​(Optional) 追加ライラリ(複数の場合はカンマ区切り) 
-    ​maxCount: 10+ ​* ​ @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);​
 }; };
 /** /**
ライン 170: ライン 215:
  ​* ​ @param ​ Number ​ lng     ​中心地点の経度  ​* ​ @param ​ Number ​ lng     ​中心地点の経度
  ​* ​ @param ​ Number ​ zoom    ズーム値  ​* ​ @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) { +GoogleMapper.show = function(mapId,​ lat, lng, zoom, options) { 
-    ​GoogleMapper.map ​new google.maps.Map(document.getElementById(mapId), ​{+    ​var params ​= {
         center: new google.maps.LatLng((lat || 38), (lng || 137.5)),         center: new google.maps.LatLng((lat || 38), (lng || 137.5)),
         zoom: (zoom || 5),         zoom: (zoom || 5),
         mapTypeId: google.maps.MapTypeId.ROADMAP,​         mapTypeId: google.maps.MapTypeId.ROADMAP,​
-        scaleControl:​ true +        ​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.getInfo()の内容を吹き出しに表示する + ​* ​ マーカーをクリックするとGoogleMapper.getMarkerInfo()の内容を吹き出しに表示する 
- ​* ​ @param ​ Number ​ lat     ​緯度 + ​* ​ @param ​ Number ​or LatLng ​       ​lat     ​緯度 ​or LatLng 
- ​* ​ @param ​ Number ​ lng     ​経度 + ​* ​ @param ​ Number ​                 lng     ​経度(latにLatLngを渡す場合は不要) 
- ​* ​ @param ​ String ​ title   ​(Optional) ツールチップ表示する文字列+ ​* ​ @param ​ String ​                 title   ​(Optional) ツールチップ表示する文字列
  ​* ​ @param ​ String or MarkerImage ​  ​image ​  ​(Optional) マーカー画像のURL or MarkerImage  ​* ​ @param ​ String or MarkerImage ​  ​image ​  ​(Optional) マーカー画像のURL or MarkerImage
- ​* ​ @return Marker  ​openInfoWindow()を追加されMarkerオブジェクト+ ​* ​ @return Marker ​ 追加マーカー
  *  *
  ​* ​ (参考)Google Maps用のマーカー画像の配布サイト  ​* ​ (参考)Google Maps用のマーカー画像の配布サイト
- ​* ​ @see http://code.google.com/​p/​google-maps-icons/+ ​* ​ @see https://mapicons.mapsmarker.com/
  */  */
 GoogleMapper.addMarker = function(lat,​ lng, title, image) { 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({     var marker = new google.maps.Marker({
         map: GoogleMapper.map,​         map: GoogleMapper.map,​
-        position: ​new google.maps.LatLng(lat,​ lng),+        position: ​position,
         title: (title || ""​),​         title: (title || ""​),​
         icon: image         icon: image
     });     });
  
-    marker.openInfoWindow = function() { +    ​google.maps.event.addListener(marker, "​click", ​function() { 
-        GoogleMapper.openInfoWindow(GoogleMapper.getInfo(marker), null, marker); +        GoogleMapper.openMarkerWindow(marker); 
-    };+    });
  
-    ​google.maps.event.addListener(marker, "​click",​ marker.openInfoWindow);+    ​GoogleMapper.markers.push(marker);
  
     return marker;     return marker;
ライン 209: ライン 277:
 /** /**
  ​* ​ Google Chart APIを使ってマーカー画像を生成する  ​* ​ Google Chart APIを使ってマーカー画像を生成する
- ​* ​ @param ​ Number ​ lat         ​緯度 + ​* ​ @param ​ Number ​or LatLng ​   ​lat         ​緯度 ​or LatLng 
- ​* ​ @param ​ Number ​ lng         ​経度 + ​* ​ @param ​ Number ​             lng         ​経度(latにLatLngを渡す場合は不要) 
- ​* ​ @param ​ String ​ title       ​(Optional) ツールチップ表示する文字列 + ​* ​ @param ​ String ​             title       ​(Optional) ツールチップ表示する文字列 
- ​* ​ @param ​ String ​ bgColor ​    ​(Optional) 背景(塗り潰し)色(例:FFFFFF) + ​* ​ @param ​ String ​             bgColor ​    ​(Optional) 背景(塗り潰し)色(例:FFFFFF) 
- ​* ​ @param ​ String ​ textColor ​  ​(Optional) 文字色(例:000000) + ​* ​ @param ​ String ​             textColor ​  ​(Optional) 文字色(例:000000) 
- ​* ​ @param ​ String ​ str         ​(Optional) マーカー上に表示する文字 + ​* ​ @param ​ String ​             str         ​(Optional) マーカー上に表示する文字 
- ​* ​ @return String or MakerImage + ​* ​ @return String or MarkerImage 
- ​* ​ @see http://code.google.com/​intl/ja/​apis/​chart/​docs/​gallery/​dynamic_icons.html+ ​* ​ @see https://developers.google.com/​chart/image/​docs/​gallery/​dynamic_icons
  */  */
 GoogleMapper.addColorMarker = function(lat,​ lng, title, bgColor, textColor, str) { GoogleMapper.addColorMarker = function(lat,​ lng, title, bgColor, textColor, str) {
     var type = "​d_map_pin_letter_withshadow";​     var type = "​d_map_pin_letter_withshadow";​
     var url = GoogleMapper._getIconURL(type,​ null, str, (bgColor || "​F30"​),​ textColor);     var url = GoogleMapper._getIconURL(type,​ null, str, (bgColor || "​F30"​),​ textColor);
 +
     var image = new google.maps.MarkerImage(     var image = new google.maps.MarkerImage(
         url,         url,
ライン 235: ライン 304:
 /** /**
  ​* ​ Google Chart APIを使って吹き出し画像を生成する  ​* ​ Google Chart APIを使って吹き出し画像を生成する
- ​* ​ @param ​ Number ​ lat         ​緯度 + ​* ​ @param ​ Number ​or LatLng ​   ​lat         ​緯度 ​or LatLng 
- ​* ​ @param ​ Number ​ lng         ​経度 + ​* ​ @param ​ Number ​             lng         ​経度(latにLatLngを渡す場合は不要) 
- ​* ​ @param ​ String ​ str         ​吹き出しに表示する文字列 + ​* ​ @param ​ String ​             str         ​吹き出しに表示する文字列 
- ​* ​ @param ​ String ​ bgColor ​    ​(Optional) 背景(塗り潰し)色(例:FFFFFF) + ​* ​ @param ​ String ​             bgColor ​    ​(Optional) 背景(塗り潰し)色(例:FFFFFF) 
- ​* ​ @param ​ String ​ textColor ​  ​(Optional) 文字色(例:000000) + ​* ​ @param ​ String ​             textColor ​  ​(Optional) 文字色(例:000000) 
- ​* ​ @param ​ String ​ style       ​(Optional) 吹き出し形状(尻尾無しは"​bbT"​) + ​* ​ @param ​ String ​             style       ​(Optional) 吹き出し形状(尻尾無しは"​bbT"​) 
- ​* ​ @return String or MakerImage + ​* ​ @return String or MarkerImage 
- ​* ​ @see http://code.google.com/​intl/ja/​apis/​chart/​docs/​gallery/​dynamic_icons.html+ ​* ​ @see https://developers.google.com/​chart/image/​docs/​gallery/​dynamic_icons
  */  */
 GoogleMapper.addBubbleMarker = function(lat,​ lng, str, bgColor, textColor, style) { GoogleMapper.addBubbleMarker = function(lat,​ lng, str, bgColor, textColor, style) {
     var type = "​d_bubble_text_small";​     var type = "​d_bubble_text_small";​
-    ​var style = style || "​bb";​+    style = style || "​bb";​
     var icon = GoogleMapper._getIconURL(type,​ style, str, (bgColor || "​FF0"​),​ textColor);     var icon = GoogleMapper._getIconURL(type,​ style, str, (bgColor || "​FF0"​),​ textColor);
  
     var iconY = -1, shadowY = -1;     var iconY = -1, shadowY = -1;
 +
     switch (style) {     switch (style) {
         case "​bb": ​     //​左下に着地点         case "​bb": ​     //​左下に着地点
-            iconY = 42+            iconY = 35
-            shadowY = 45;+            shadowY = 37;
             break;             break;
         case "​bbtl": ​   //​左上に着地点         case "​bbtl": ​   //​左上に着地点
ライン 282: ライン 352:
  */  */
 GoogleMapper._getIconURL = function(iconType,​ style, str, bgColor, textColor) { GoogleMapper._getIconURL = function(iconType,​ style, str, bgColor, textColor) {
-    var url = "";​ 
- 
-    if (location.protocol == "​http:"​) { 
-        url = "​http://​chart.apis";​ 
-    } else { 
-        url = "​https://​www";​ 
-    } 
- 
-    url += "​.google.com/​chart?​chst="​ + iconType + "&​chld=";​ 
- 
     var params = [style, encodeURIComponent(str || ""​),​ bgColor, (textColor || ""​)];​     var params = [style, encodeURIComponent(str || ""​),​ bgColor, (textColor || ""​)];​
  
ライン 298: ライン 358:
     }     }
  
-    return ​url + params.join("​|"​);​+    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 ​ 吹き出しを表示するマーカー  ​* ​ @param ​ Marker ​ marker ​ 吹き出しを表示するマーカー
  */  */
-GoogleMapper.getInfo ​= function(marker) { +GoogleMapper.openMarkerWindow = function(marker) { 
-    return marker.title;​+    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 = { "&":​ "&​amp;",​ '"':​ "&​quot;",​ "'":​ "&#​039;",​ "<":​ "&​lt;",​ ">":​ "&​gt;"​ }; 
 + 
 +    return str.replace(/​[&"'<>​]/​g,​ function(m) { return rep[m]; });
 }; };
 /** /**
ライン 318: ライン 429:
     }     }
  
-    GoogleMapper.closeInfoWindow()+    ​var infoWindow = GoogleMapper.infoWindow
-    ​GoogleMapper.map.getStreetView().setVisible(false); +    ​infoWindow.setAnchor(null); //​非公式APIでいったんクリア 
- +    infoWindow.setOptions({ content: content, position: latLng });
-    ​var infoWindow ​= new google.maps.InfoWindow({ content: content, position: latLng });+
     infoWindow.open(GoogleMapper.map,​ marker);     infoWindow.open(GoogleMapper.map,​ marker);
-    GoogleMapper.lastInfoWindow = infoWindow; 
 }; };
 /** /**
ライン 329: ライン 438:
  */  */
 GoogleMapper.closeInfoWindow = function() { GoogleMapper.closeInfoWindow = function() {
-    ​if (GoogleMapper.lastInfoWindow) { +    GoogleMapper.infoWindow.close();
-        ​GoogleMapper.lastInfoWindow.close(); +
-    }+
 }; };
 /** /**
ライン 353: ライン 460:
 }; };
 /** /**
- ​*  ​地名や施設名等で検索する(ジオコーディング) + ​*  ​端末の現在位置を取得する 
- ​* ​ @param  ​String ​     keywords ​   検索したいキーワード + ​* ​ @param  ​Function ​   onSuccess ​  ​位置取得時に実行するCallback関数 
- ​* ​ @param ​ Function ​   ​callback ​   検索結果が渡されるCallback関数+ ​* ​ @param ​ Function ​   ​onError ​    ​(Optional) 位置取得失敗時に実行するCallback関数 
 + ​* ​ @return Boolean ​    ​位置情報を取得可能かどうか 
 + ​* ​ @see http://​dev.w3.org/​geo/​api/​spec-source.html#​api_description
  */  */
-GoogleMapper.search ​= function(keywordscallback) { +GoogleMapper.getCurrentPosition ​= function(onSuccessonError) { 
-    if (keywords) { +    if (!navigator.geolocation) { 
-        (new google.maps.Geocoder()).geocode( +        ​return false;
-            ​address: keywords }, +
-            GoogleMapper.searchCallback +
-        ​);+
     }     }
 +
 +    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ライブラリ) 
- ​* ​ 1件の場合は地図上でその場所移動、2件以上の場合は内容alert()で表示 + ​* ​ @param  ​String ​ inputId 検索ボックスid
- ​* ​ @param  ​Array           ​response ​   GeocoderResponse配列 +
- ​* ​ @param ​ GeocoderStatus ​ status +
- ​* ​ @see http://​code.google.com/​intl/​ja/​apis/​maps/​documentation/​v3/​reference.html#​Geocoder+
  */  */
-GoogleMapper.searchCallback ​= function(response, status) { +GoogleMapper.setAutocomplete ​= function(inputId) { 
-    ​if (!GoogleMapper.checkResponseStatus(status)) {+    ​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;         return;
     }     }
-    var len = response.length;​ + 
-    ​if (len == 1) { +    ​callback ​callback || function(response, status{ 
-        GoogleMapper.map.panTo(GoogleMapper.getGeocodeLatLng(response[0])); +        if (!GoogleMapper.checkResponseStatus(status)) { 
-        ​return; +            ​return;
-    } +
-    var msg = len + "​件ヒットしました\n";​ +
-    ​if (len <= GoogleMapper.maxCount) { +
-        for (var i = 0; i < len; i++) { +
-            ​msg += "​・"​ + GoogleMapper.getGeocodeAddress(response[i]) + "​\n"​;+
         }         }
-    ​+ 
-    alert(msg + "​詳細な地名を追加してください"​);​+        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);
 }; };
 /** /**
ライン 393: ライン 537:
  ​* ​ @param ​ LatLng ​     latLng ​     緯度経度  ​* ​ @param ​ LatLng ​     latLng ​     緯度経度
  ​* ​ @param ​ Function ​   callback ​   検索結果が渡されるCallback関数  ​* ​ @param ​ Function ​   callback ​   検索結果が渡されるCallback関数
 + ​* ​                                 渡されるのはGeocoderResponseの配列とGeocoderStatus
 + ​* ​ @see https://​developers.google.com/​maps/​documentation/​javascript/​reference#​Geocoder
  */  */
 GoogleMapper.searchByLatLng = function(latLng,​ callback) { GoogleMapper.searchByLatLng = function(latLng,​ callback) {
     (new google.maps.Geocoder()).geocode({ latLng: 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を渡す  ​* ​ 1度目に出発地点、2度目に目的地のlatLngを渡す
- ​* ​ @param ​ String / LatLng point   ​地名 or LatLngオブジェクト+ ​* ​ @param ​ String / LatLng point   ​地名 or 緯度経度
  ​* ​ @param ​ String ​         mode    (Optional) 移動手段(省略すると車)  ​* ​ @param ​ String ​         mode    (Optional) 移動手段(省略すると車)
- ​* ​                                            DirectionsTravelModeの定数のどれか+ ​* ​                                            TravelModeの定数のどれか
  ​* ​ @param ​ String ​         panelId (Optional) 道順の説明を表示するdiv等のid  ​* ​ @param ​ String ​         panelId (Optional) 道順の説明を表示するdiv等のid
  */  */
ライン 431: ライン 623:
         origin: router.from,​         origin: router.from,​
         destination:​ point,         destination:​ point,
-        travelMode: (mode || router.mode || google.maps.DirectionsTravelMode.DRIVING),+        travelMode: (mode || router.mode || google.maps.TravelMode.DRIVING),
         provideRouteAlternatives:​ true,         provideRouteAlternatives:​ true,
-        unitSystem: google.maps.DirectionsUnitSystem.METRIC+        unitSystem: google.maps.UnitSystem.METRIC
     };     };
  
-    ​var callback = function(response,​ status) {+    ​(new google.maps.DirectionsService()).route(request, ​function(response,​ status) {
         if (panel) {         if (panel) {
             panel.innerHTML = "";​             panel.innerHTML = "";​
ライン 444: ライン 636:
             renderer.setDirections(response);​             renderer.setDirections(response);​
         }         }
-    }+    });
- +
-    (new google.maps.DirectionsService()).route(request,​ callback);+
 }; };
 /** /**
- ​*  ​GeocoderStatusの内容チェックする + ​*  ​ストリートビュー地図と別に表示できるようにする 
- ​* ​ エラーの場合alert()を表示する + ​* ​ @param  ​String ​ panelId ストリートビューを表示する場所(div等)のid属性
- ​* ​ @param  ​GeocoderStatus ​ status +
- ​* ​ @return Boolean true: OK, false: OK以外+
  */  */
-GoogleMapper.checkResponseStatus ​= function(status) { +GoogleMapper.setStreetView ​= function(panelId) { 
-    ​switch ​(status) { +    ​GoogleMapper.map.setStreetView(new google.maps.StreetViewPanorama
-        ​case "​OK":​ +        ​document.getElementById(panelId), 
-            return true; +        ​{ enableCloseButtontrue, visible: false } 
-        case "​ZERO_RESULTS":​ +    ));
-            alert("​該当する地域がありませんでした"​)+
-            break; +
-        ​default+
-            ​alert("​エラーが発生しました (" + status + ")")+
-    } +
-    return false;+
 }; };
 /** /**
- ​*  ​GeocoderResponseから主な地名取り出す + ​*  ​Google Placesに登録されているスポット表示る(要Placesライブラリ) 
- ​* ​ @param  ​GeocoderResponse ​   geocodeResult + ​* ​ @param  ​Number ​ iconSize ​   (Optional) アイコンの表示サイズ 
- ​* ​ @return String ​ 地名+ ​* ​ @see https://​developers.google.com/​maps/​documentation/​javascript/​places
  */  */
-GoogleMapper.getGeocodeAddress ​= function(geocodeResult) { +GoogleMapper.showPlaces ​= function(iconSize) { 
-    ​var address ​""​+    ​(new google.maps.places.PlacesService(GoogleMapper.map)).search( 
-    var components ​geocodeResult.address_components+        { bounds: GoogleMapper.map.getBounds() },   //​取得対象範囲は表示中の地図 
-    for (var i = components.length ​- 2; i >= 0; i--) {  //​国名は省略 +        function(results,​ status) { 
-        var name components[i].long_name+            if (!GoogleMapper.checkResponseStatus(status)) { 
-        if (!name.match(/​^(日本|[0-9]{3}-[0-9]{4})$/)) {    //​郵便番号も無視 +                return; 
-            ​address += " " + name;+            } 
 + 
 +            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; 
 +                ​
 +            ​}
         }         }
-    ​+    );
-    return address.substring(1);+
 }; };
 /** /**
- ​*  ​GeocoderResponseからLatLngオブジェクトをる + ​*  ​Google Placesのスポットをマーカーとして表示する 
- ​* ​ @param  ​GeocoderResponse ​   geocodeResult + ​* ​ @param  ​PlaceResult place   ​スポット情報 
- ​* ​ @return LatLng+ ​* ​ @param  Size        size    アイコンサイズ
  */  */
-GoogleMapper.getGeocodeLatLng ​= function(geocodeResult) { +GoogleMapper.addPlace ​= function(place, size) { 
-    var location ​geocodeResult.geometry.location;​ +    var marker ​new google.maps.Marker({ 
-    ​return ​new google.maps.LatLng(location.lat(), location.lng());+        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)を表示する + ​* ​ 地図上に広告(Google AdSense)を表示する(要AdSenseライブラリ) 
- ​* ​ @param ​ String ​         pubId       表示するAdSenseユニットのID+ ​* ​ @param ​ String ​         pubId       ​AdSenseアカウントのサイト運営者ID
  ​* ​ @param ​ AdFormat ​       format ​     (Optional) AdSenseの形状  ​* ​ @param ​ AdFormat ​       format ​     (Optional) AdSenseの形状
  ​* ​ @param ​ ControlPosition position ​   (Optional) 地図上のどこに表示するか  ​* ​ @param ​ ControlPosition position ​   (Optional) 地図上のどこに表示するか
  ​* ​ @param ​ String ​         channel ​    ​(Optional) AdSenseのチャネル番号  ​* ​ @param ​ String ​         channel ​    ​(Optional) AdSenseのチャネル番号
- ​* ​ @see http://code.google.com/​intl/​ja/​apis/​maps/​documentation/​javascript/​advertising.html+ ​* ​ @see https://developers.google.com/​maps/​documentation/​javascript/​advertising
  */  */
 GoogleMapper.showAds = function(pubId,​ format, position, channel) { GoogleMapper.showAds = function(pubId,​ format, position, channel) {
ライン 510: ライン 730:
 /** /**
  ​* ​ メインの地図に重ねて、右下に沖縄のミニ地図を表示  ​* ​ メインの地図に重ねて、右下に沖縄のミニ地図を表示
- ​* ​ @param ​ Array   ​markers (Optional) ​メイン地図に表示したMarkerの配列+ ​* ​ @param ​ Array   ​markers (Optional) ​沖縄のミニ地図に表示するMarkerの配列
  */  */
 GoogleMapper.showOkinawa = function(markers) { GoogleMapper.showOkinawa = function(markers) {
     var map = GoogleMapper.map;​     var map = GoogleMapper.map;​
 +
     google.maps.event.addListener(map,​ "​tilesloaded",​ function() {     google.maps.event.addListener(map,​ "​tilesloaded",​ function() {
         google.maps.event.clearListeners(map,​ "​tilesloaded"​);​         google.maps.event.clearListeners(map,​ "​tilesloaded"​);​
ライン 521: ライン 742:
         outer.style.position = "​absolute";​         outer.style.position = "​absolute";​
         outer.style.right = 0;         outer.style.right = 0;
-        outer.style.bottom = "1.2em";+        outer.style.bottom = "120px"; ​  //Overview Map Controlの分だけ空ける
         outer.style.overflow = "​hidden";​         outer.style.overflow = "​hidden";​
-        outer.style.width = "150px";+        outer.style.width = "113px";
         outer.style.height = outer.style.width;​         outer.style.height = outer.style.width;​
-        outer.style.border = "solid 0 #ccc"; +        outer.style.border = "solid 0 #eee"; 
-        outer.style.borderWidth = "3px 3px 3px";+        outer.style.borderWidth = "6px 6px 6px";
  
         //​実際に地図が載るところ         //​実際に地図が載るところ
         var inner = outer.appendChild(document.createElement("​div"​));​         var inner = outer.appendChild(document.createElement("​div"​));​
-        inner.style.height = "250px"; +        inner.style.height = "160px"; 
-        inner.style.top = "-50px"; +        inner.style.top = "-23px";
         var okinawa = new google.maps.Map(inner,​ {         var okinawa = new google.maps.Map(inner,​ {
             center: new google.maps.LatLng(26.5,​ 127.9), ​   //​沖縄本島の中心あたり             center: new google.maps.LatLng(26.5,​ 127.9), ​   //​沖縄本島の中心あたり
ライン 548: ライン 768:
         closeBtn.innerHTML = "​×";​         closeBtn.innerHTML = "​×";​
         closeBtn.style.position = "​absolute";​         closeBtn.style.position = "​absolute";​
-        closeBtn.style.top = 0;+        closeBtn.style.top = "​-5px"​;
         closeBtn.style.right = 0;         closeBtn.style.right = 0;
         closeBtn.style.padding = "0 3px";         closeBtn.style.padding = "0 3px";
-        closeBtn.style.backgroundColor = "#ddd";+        closeBtn.style.backgroundColor = "#eee";
         closeBtn.style.cursor = "​pointer";​         closeBtn.style.cursor = "​pointer";​
         closeBtn.onclick = function() { outer.style.display = "​none";​ };         closeBtn.onclick = function() { outer.style.display = "​none";​ };
ライン 565: ライン 785:
             return;             return;
         }         }
-        var addMarker ​= function (origin) {+        var duplicateMarker ​= function(origin) {
             var marker = new google.maps.Marker({             var marker = new google.maps.Marker({
                 position: origin.position,​                 position: origin.position,​
ライン 573: ライン 793:
             });             });
             marker.setMap(okinawa);​             marker.setMap(okinawa);​
-            google.maps.event.addListener(marker,​ "​click", ​origin.openInfoWindow);+            google.maps.event.addListener(marker,​ "​click", ​function() { 
 +                GoogleMapper.openMarkerWindow(origin);​ 
 +            });
         };         };
         for (var i = 0, len = markers.length;​ i < len; i++) {         for (var i = 0, len = markers.length;​ i < len; i++) {
-            ​addMarker(markers[i]);​+            ​duplicateMarker(markers[i]);​
         }         }
     });     });
 +};
 +/**
 + ​* ​ consoleがある場合のみ、コンソールに出力する
 + ​* ​ @param ​ Object ​ value
 + */
 +GoogleMapper.log = function(value) {
 +    if (window.console && console.log) {
 +        console.log(value);​
 +    }
 }; };
 /​****************************************************************************** /​******************************************************************************
ライン 584: ライン 815:
  ​* ​ GoogleMapeer.demo("​gmap",​ "​route",​ "​keywords"​);​  ​* ​ GoogleMapeer.demo("​gmap",​ "​route",​ "​keywords"​);​
  ​* ​ @param ​ String ​ mapId           ​地図を表示する場所(div等)のid属性  ​* ​ @param ​ String ​ mapId           ​地図を表示する場所(div等)のid属性
- ​* ​ @param ​ String  ​routerPanelId ​   ​(Optional) 道順を表示する場所(div等)のid属性 + ​* ​ @param ​ String  ​streetViewId ​   (Optional) ストリートビューを表示するdiv等のid属性 
- ​* ​ @param ​ String ​ keywordInputId ​  ​(Optional) 検索用テキストボックスのid属性+ ​* ​ @param ​ String ​ routerPanelId ​  (Optional) 道順を表示する場所(div等)のid属性 
 + ​* ​ @param ​ String ​ keywordInputId ​ (Optional) 検索用テキストボックスのid属性
  ​******************************************************************************/​  ​******************************************************************************/​
-GoogleMapper.demo = function(mapId,​ routerPanelId,​ keywordInputId) {+GoogleMapper.demo = function(mapId, streetViewId, routerPanelId,​ keywordInputId) { 
 +    var demo = GoogleMapper.demo;​ 
     //​地図を表示(緯度経度ズームを渡さないと日本列島を表示する)     //​地図を表示(緯度経度ズームを渡さないと日本列島を表示する)
-    GoogleMapper.show(mapId);​+    ​var map = GoogleMapper.show(mapId);​
  
     //​マーカーを表示     //​マーカーを表示
-    var iconUrl ​"​http://​google-maps-icons.googlecode.com/​files/​moderntower.png";​ +    var tokyo = GoogleMapper.addMarker(35.7,​ 139.7, "​東京"​)
-    ​GoogleMapper.addMarker(35.7,​ 139.7, "​東京"​, iconUrl).openInfoWindow();  //​最初から開く +    //​マーカー上に吹き出しを表示 
-    //​マーカーの色変える+    GoogleMapper.openMarkerWindow(tokyo); 
 +    //色の違うマーカーを表示
     GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0",​ "​000",​ "​虎"​);​     GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0",​ "​000",​ "​虎"​);​
-    //マーカーを吹き出し型にする +    //​吹き出し型のマーカーを表示 
-    var naha = GoogleMapper.addBubbleMarker(26.2,​ 127.7, "​那覇"​);​+    var naha = GoogleMapper.addBubbleMarker(26.2,​ 127.7, "<那覇>");
  
     //​沖縄のミニ地図を表示     //​沖縄のミニ地図を表示
     GoogleMapper.showOkinawa([naha]);​     GoogleMapper.showOkinawa([naha]);​
 +
 +    //​ストリートビューを地図とは別に表示できるようにする
 +    GoogleMapper.setStreetView(streetViewId);​
  
     //​地図上をクリック可能にする     //​地図上をクリック可能にする
ライン 615: ライン 853:
  
         //​二つの地点間の車または徒歩の道順を表示         //​二つの地点間の車または徒歩の道順を表示
-        if (GoogleMapper.demo.startFlg) { //​スタート地点指定済みの場合 +        if (demo.startFlg) {    //​スタート地点指定済みの場合 
-            ​GoogleMapper.demo.startFlg = false;+            demo.startFlg = false;
             GoogleMapper.direct(latLng);​             GoogleMapper.direct(latLng);​
             return ""; ​ //​この場合は吹き出し表示なし             return ""; ​ //​この場合は吹き出し表示なし
         }         }
-        ​GoogleMapper.demo.startFlg = false; +        demo.startFlg = false; 
-        ​GoogleMapper.demo.startRouting = function(mode) {+        demo.startRouting = function(mode) {
             GoogleMapper.mapClickable = false;             GoogleMapper.mapClickable = false;
-            ​GoogleMapper.demo.startFlg = true;+            demo.startFlg = true;
             GoogleMapper.direct(latLng,​ mode, routerPanelId);​             GoogleMapper.direct(latLng,​ mode, routerPanelId);​
             GoogleMapper.closeInfoWindow();​             GoogleMapper.closeInfoWindow();​
         };         };
- 
         h += "<​br /><br />​ここから次にクリックする場所までの道順を表示できます<​br />";​         h += "<​br /><br />​ここから次にクリックする場所までの道順を表示できます<​br />";​
- 
         var modes = {         var modes = {
             DRIVING: "​車",​             DRIVING: "​車",​
ライン 638: ライン 874:
             h += '<​input type="​button"​ value="'​ + modes[mode] + '​の場合"';​             h += '<​input type="​button"​ value="'​ + modes[mode] + '​の場合"';​
             h += ' onclick="​GoogleMapper.demo.startRouting(';​             h += ' onclick="​GoogleMapper.demo.startRouting(';​
-            h += '​google.maps.DirectionsTravelMode.' + mode + '​)"​ /> ';+            h += '​google.maps.TravelMode.' + mode + '​)"​ /> ';
         }         }
  
ライン 645: ライン 881:
  
     //​道順の終点はマーカーでもOKにする     //​道順の終点はマーカーでもOKにする
-    GoogleMapper.getInfo ​= function(marker) { +    ​var getMarkerInfo = GoogleMapper.getMarkerInfo;​ //​オリジナルを退避 
-        if (GoogleMapper.demo.startFlg) {   ​//​スタート地点指定済みの場合 +    ​GoogleMapper.getMarkerInfo ​= function(marker) { 
-            ​GoogleMapper.demo.startFlg = false;+        if (demo.startFlg) {    //​スタート地点指定済みの場合 
 +            demo.startFlg = false;
             GoogleMapper.direct(marker.position);​             GoogleMapper.direct(marker.position);​
             return "";​             return "";​
         }         }
-        return marker.title;+        return ​getMarkerInfo(marker);
     };     };
 +
 +    //​検索キーワードの入力補完(要placesライブラリ)
 +    if (google.maps.places) {
 +        GoogleMapper.setAutocomplete(keywordInputId);​
 +    }
  
     //​地名や施設名等で検索する(ジオコーディング)     //​地名や施設名等で検索する(ジオコーディング)
-    ​GoogleMapper.demo.search = function() { +    var searchBox = document.getElementById(keywordInputId);​ 
-        ​var searchBox = document.getElementById(keywordInputId);​+    demo.search = function() {
         GoogleMapper.search(searchBox.value);​         GoogleMapper.search(searchBox.value);​
         searchBox.focus();​         searchBox.focus();​
     };     };
  
-    //Firebugがあれば、中心点とズーム値をコンソールに表示 +    //consoleがあれば、中心点とズーム値をコンソールに表示 
-    ​if (!window.console || !window.console.log) { +    ​google.maps.event.addListener(map, "​idle", ​function() {
-        return; +
-    } +
-    var map = GoogleMapper.map;​ +
-    var log = function() {+
         var center = map.getCenter();​         var center = map.getCenter();​
         var latlng = "​lat:"​ + center.lat() + ", lng:" + center.lng();​         var latlng = "​lat:"​ + center.lat() + ", lng:" + center.lng();​
-        ​console.log(latlng + ", zoom:" + map.getZoom());​ +        ​GoogleMapper.log(latlng + ", zoom:" + map.getZoom());​ 
-    }+    });
-    google.maps.event.addListener(map,​ "​idle",​ log);+
 }; };
 </​code>​ </​code>​
  
javascript/google-mapper-v3.1299161243.txt.gz · 最終更新: 2011/03/03 23:07 by dgbadmin