ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper-v3 [2010/08/09 22:34]
dgbadmin 0.3.2
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で表示するサンプル]] 
-ソースコードの中の、GoogleMapper.demoを参照。+ 
 +[[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、位置情報の取得あり)
  
  
ライン 25: ライン 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版の場合もあります
 +
 +
 +===== 使い方の例 =====
 +
 +Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-)
 +
 +==== Google Maps APIのJavaScriptを読み込む ====
 +<code javascript>​
 +GoogleMapper.load(function() {
 +    //​読み込んだ後に行う処理
 +});
 +</​code>​
 +
 +==== Googleマップを表示する ====
 +<code javascript>​
 +//​mapIdは地図を表示するdiv等のid属性
 +GoogleMapper.show(mapId,​ lat, lng, zoom);
 +</​code>​
 +
 +==== マーカーを表示する ====
 +<code javascript>​
 +GoogleMapper.addMarker(35.7,​ 139.7, "​東京"​);​
 +</​code>​
 +
 +=== アイコン画像を指定してマーカーを表示する ===
 +<code javascript>​
 +GoogleMapper.addMarker(35.7,​ 139.7, "​東京",​ iconUrl);
 +</​code>​
 +
 +=== 色を指定してマーカーを表示する ===
 +<code javascript>​
 +GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0"​);​
 +</​code>​
 +
 +=== 色を指定してマーカーを表示して、その中に文字を表示する ===
 +<code javascript>​
 +GoogleMapper.addColorMarker(34.7,​ 135.5, "​大阪",​ "​FF0",​ "​000",​ "​虎"​);​
 +</​code>​
 +
 +=== 吹出し型のマーカーを表示する ===
 +<code javascript>​
 +GoogleMapper.addBubbleMarker(26.2,​ 127.7, "​那覇"​);​
 +</​code>​
 +
 +==== 地図とストリートビューを並べて表示する ====
 +デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\
 +それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。
 +<code javascript>​
 +GoogleMapper.setStreetView(streetViewId);​
 +</​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>​
 +GoogleMapper.searchByLatLng(latLng,​ function(response,​ status) {
 +    if (GoogleMapper.checkResponseStatus(status)) {
 +        var address = GoogleMapper.getGeocodeAddress(response[0]);​
 +        //​(以下省略)
 +    }
 +});
 +</​code>​
 +
 +==== 車または徒歩での道順案内を表示する ====
 +さらにストリートビューと合わせて見ると面白い。
 +<code javascript>​
 +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 + '​)"​ /> ';
 +}
 +</​code>​
 +
 +==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ====
 +日本列島と一緒に沖縄も表示させたい。
 +<code javascript>​
 +GoogleMapper.showOkinawa([markers]);​ //​あれば沖縄に表示するMarkerの配列を渡す
 +</​code>​
  
  
ライン 35: ライン 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.3.2 + ​* ​ @version ​  0.7.1 
- ​* ​ @copyright 2008-2010 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/​v3/ + ​* ​ @see https://developers.google.com/​maps/​documentation/​javascript/reference
- ​* ​ @see http://​code.google.com/​intl/​ja/​apis/​maps/​documentation/​v3/reference.html+
  */  */
 var GoogleMapper = { var GoogleMapper = {
     /** Mapオブジェクト */     /** Mapオブジェクト */
     map: null,     map: null,
-     +    ​/** マーカーの配列 */ 
-    /** 最後に開いた吹き出しオブジェクト ​*/ +    markers: [], 
-    ​lastInfoWindow: null, +    /** 吹き出し */ 
-     +    ​infoWindow: null, 
-    /** 地名による検索時にリスト表示する最大件数 */ +    ​/** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */ 
-    ​maxCount: 10+    ​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);​
 }; };
 /** /**
ライン 59: ライン 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 ​ ​imageUrl ​  (Optional) マーカー画像のURL + ​* ​ @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, ​imageUrl) {+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({
-        ​positionnew google.maps.LatLng(latlng),+        ​mapGoogleMapper.map, 
 +        position: position,
         title: (title || ""​),​         title: (title || ""​),​
-        icon: imageUrl+        icon: image
     });     });
-    marker.setMap(GoogleMapper.map);​ 
  
-    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;
 }; };
 /** /**
- ​* ​ 吹き出しに表示する内容を作+ ​*  ​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 ​ 吹き出しを表示するマーカー  ​* ​ @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]; });
 }; };
 /** /**
ライン 113: ライン 428:
         return;         return;
     }     }
-    ​GoogleMapper.closeInfoWindow(); + 
-    ​ +    var infoWindow = GoogleMapper.infoWindow;​ 
-    var infoWindow ​= new google.maps.InfoWindow({ content: content, position: latLng });+    infoWindow.setAnchor(null); //​非公式APIでいったんクリア 
 +    infoWindow.setOptions({ content: content, position: latLng });
     infoWindow.open(GoogleMapper.map,​ marker);     infoWindow.open(GoogleMapper.map,​ marker);
-    GoogleMapper.lastInfoWindow = infoWindow; 
 }; };
 /** /**
ライン 123: ライン 438:
  */  */
 GoogleMapper.closeInfoWindow = function() { GoogleMapper.closeInfoWindow = function() {
-    ​if (GoogleMapper.lastInfoWindow) { +    GoogleMapper.infoWindow.close();
-        ​GoogleMapper.lastInfoWindow.close(); +
-    }+
 }; };
 /** /**
ライン 136: ライン 449:
     //​ダブルクリックはクリックイベントも発生するので無効にする     //​ダブルクリックはクリックイベントも発生するので無効にする
     GoogleMapper.map.disableDoubleClickZoom = true;     GoogleMapper.map.disableDoubleClickZoom = true;
 +    GoogleMapper.mapClickable = true;
  
     google.maps.event.addListener(GoogleMapper.map,​ "​click",​ function(event) {     google.maps.event.addListener(GoogleMapper.map,​ "​click",​ function(event) {
-        GoogleMapper.openInfoWindow(callback(event.latLng),​ event.latLng);​+        ​if (GoogleMapper.mapClickable) { 
 +            ​GoogleMapper.openInfoWindow(callback(event.latLng),​ event.latLng);​ 
 +        } else { 
 +            GoogleMapper.mapClickable = true; 
 +        }
     });     });
 }; };
 /** /**
- ​*  ​地名や施設名等で検索する(ジオコーディング) + ​*  ​端末の現在位置を取得する 
- ​* ​ @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);
 }; };
 /** /**
ライン 182: ライン 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
  */  */
ライン 203: ライン 606:
     GoogleMapper._router = null;     GoogleMapper._router = null;
  
-    var renderer = new google.maps.DirectionsRenderer(); +    var renderer = new google.maps.DirectionsRenderer({ 
-    ​renderer.setMap(GoogleMapper.map);​+        ​map: ​GoogleMapper.map
 +        draggable: true 
 +    });
  
     var panel = null;     var panel = null;
ライン 218: ライン 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 = "";​
ライン 231: ライン 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)を表示する(要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の配列+ ​* ​ @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"​);​
ライン 291: ライン 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), ​   //​沖縄本島の中心あたり
ライン 318: ライン 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";​ };
ライン 335: ライン 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,​
                 title: origin.title,​                 title: origin.title,​
-                icon: origin.icon+                icon: origin.icon
 +                shadow: origin.shadow
             });             });
             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);​
 +    }
 }; };
 /​****************************************************************************** /​******************************************************************************
ライン 353: ライン 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); +    //​マーカー上に吹き出しを表示 
-    GoogleMapper.addMarker(34.7, 135.5, "​大阪", ​iconUrl).openInfoWindow();  //最初から開く +    GoogleMapper.openMarkerWindow(tokyo);​ 
-    var naha = GoogleMapper.addMarker(26.2, 127.7, "​那覇"​, iconUrl);+    //​色の違うマーカーを表示 
 +    GoogleMapper.addColorMarker(34.7, 135.5, "​大阪", ​"​FF0",​ "​000",​ "​虎"​); 
 +    ​//吹き出し型のマーカーを表示 
 +    var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "<那覇>");
  
     //​沖縄のミニ地図を表示     //​沖縄のミニ地図を表示
     GoogleMapper.showOkinawa([naha]);​     GoogleMapper.showOkinawa([naha]);​
 +
 +    //​ストリートビューを地図とは別に表示できるようにする
 +    GoogleMapper.setStreetView(streetViewId);​
  
     //​地図上をクリック可能にする     //​地図上をクリック可能にする
ライン 382: ライン 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.demo.startFlg = true;+            GoogleMapper.mapClickable = false; 
 +            ​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: "​車",​
ライン 404: ライン 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 + '​)"​ /> ';
         }         }
  
ライン 411: ライン 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.1281360862.txt.gz · 最終更新: 2010/08/09 22:34 by dgbadmin