ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper-v3 [2011/04/05 22:39]
dgbadmin 使い方の例の説明文の微修正
javascript:google-mapper-v3 [2015/09/22 14:38] (現在)
dgbadmin [ソースコード] 0.7.1
ライン 5: ライン 5:
 {{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://​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)]]が公開されたので、バージョン2用に作った[[google mapper|Google Mapper]]とは別に、Google Maps API V3用の「Google Mapper V3」を書き直した。\\ +[[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 AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。
  
 (上記の画像はGoogle Maps API V3ではなく[[php-tool-box/​google-maps-static-api|Google Static Maps API]]で表示している。) (上記の画像はGoogle Maps API V3ではなく[[php-tool-box/​google-maps-static-api|Google Static Maps API]]で表示している。)
ライン 14: ライン 14:
 [[http://​0-oo.net/​sam/​google-mapper/​|Google Mapper V3 動作サンプル]] [[http://​0-oo.net/​sam/​google-mapper/​|Google Mapper V3 動作サンプル]]
  
-[[https://0-oo.googlecode.com/​svn/​trunk/​sam/​google-mapper-v3-over-https.html|Google Mapper V3をHTTPSで表示するサンプル]]+[[http://0-oo.net/​sam/​google-mapper/​geolocation.php|Google Mapper V3で現在地取得する動作サンプル(スマートフォンにも対応)]]
  
-[[http://​0-oo.net/​hotel/​|ホテル 旅館 × 地図から検索]] (応用例)+[[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、位置情報の取得あり
  
  
ライン 24: ライン 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版の場合もあります
ライン 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>​
 GoogleMapper.addBubbleMarker(26.2,​ 127.7, "​那覇"​);​ GoogleMapper.addBubbleMarker(26.2,​ 127.7, "​那覇"​);​
 </​code>​ </​code>​
  
-==== ストリートビューを表示するdiv要素を指定する ====+==== 地図とストリートビューを並べて表示する ====
 デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\ デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\
-それは惜しいので、これ使えば地図とストリートビューを並べて表示できる。+それは惜しいので、地図の横にdiv要素用意して下記のようにすれ地図とストリートビューを並べて表示できる。
 <code javascript>​ <code javascript>​
 GoogleMapper.setStreetView(streetViewId);​ GoogleMapper.setStreetView(streetViewId);​
ライン 85: ライン 95:
     GoogleMapper.showAds("​AdSenseのPublisher ID");     GoogleMapper.showAds("​AdSenseのPublisher ID");
 }, "​adsense"​);​ }, "​adsense"​);​
 +</​code>​
 +
 +==== 現在位置を取得する ====
 +iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする?
 +<code javascript>​
 +GoogleMapper.getCurrentPosition(function(latLng) {
 +    // (略)
 +});
 </​code>​ </​code>​
  
ライン 138: ライン 156:
     h += '<​input type="​button"​ value="'​ + modes[mode] + '​の場合"';​     h += '<​input type="​button"​ value="'​ + modes[mode] + '​の場合"';​
     h += ' onclick="​startRouting(';​     h += ' onclick="​startRouting(';​
-    h += '​google.maps.DirectionsTravelMode.' + mode + '​)"​ /> ';+    h += '​google.maps.TravelMode.' + mode + '​)"​ /> ';
 } }
 </​code>​ </​code>​
  
 ==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ==== ==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ====
 +日本列島と一緒に沖縄も表示させたい。
 <code javascript>​ <code javascript>​
 GoogleMapper.showOkinawa([markers]);​ //​あれば沖縄に表示するMarkerの配列を渡す GoogleMapper.showOkinawa([markers]);​ //​あれば沖縄に表示するMarkerの配列を渡す
ライン 153: ライン 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.5.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: [],     markers: [],
-    ​+    ​/** 吹き出し */ 
 +    infoWindow: null,
     /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */     /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */
-    mapClickable:​ false+    mapClickable:​ false
-     +
-    /** 最後に開いた吹き出し */ +
-    lastInfoWindow:​ null, +
-     +
-    /** 地名による検索時にリスト表示する最大件数 */ +
-    maxCount: 10+
 }; };
 /** /**
ライン 181: ライン 193:
  ​* ​ @param ​ Function ​   callback ​   読み込み完了時に実行するCallback関数  ​* ​ @param ​ Function ​   callback ​   読み込み完了時に実行するCallback関数
  ​* ​ @param ​ String ​     libraries ​  ​(Optional) 追加ライブラリ(複数の場合はカンマ区切り)  ​* ​ @param ​ String ​     libraries ​  ​(Optional) 追加ライブラリ(複数の場合はカンマ区切り)
 + ​* ​ @param ​ Boolean ​    ​sensor ​     (Optional) 位置情報を使用するかどうか
  */  */
-GoogleMapper.load = function(callback,​ libraries) {+GoogleMapper.load = function(callback,​ libraries, sensor) {
     GoogleMapper._onload = callback;     GoogleMapper._onload = callback;
  
-    var subDomain = (location.protocol == "​http:"​ ? "​maps"​ : "​maps-api-ssl"​);​ 
     var params = [     var params = [
-        "​sensor=false",​ 
         "​callback=GoogleMapper._onload",​         "​callback=GoogleMapper._onload",​
-        "​libraries="​ + (libraries || ""​)+        "​libraries="​ + (libraries || ""​), 
 +        "​sensor="​ + (sensor || false)
     ];     ];
  
     var script = document.createElement("​script"​);​     var script = document.createElement("​script"​);​
     script.type = "​text/​javascript";​     script.type = "​text/​javascript";​
-    script.src = "//" + subDomain + ".google.com/​maps/​api/​js?"​ + params.join("&"​);​+    script.src = "//maps.googleapis.com/​maps/​api/​js?"​ + params.join("&"​);​
     document.getElementsByTagName("​head"​)[0].appendChild(script);​     document.getElementsByTagName("​head"​)[0].appendChild(script);​
 }; };
ライン 203: ライン 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,​
 +        styles: [   //​コンビニ等、全ての情報を表示する
 +            { featureType:​ "​all",​ elementType:​ "​all",​ stylers: [{ visibility: "​on"​ }] }
 +        ],
         scaleControl:​ true,         scaleControl:​ true,
         overviewMapControl:​ true,         overviewMapControl:​ true,
         overviewMapControlOptions:​ { opened: 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;
 }; };
 /** /**
ライン 224: ライン 251:
  *  *
  ​* ​ (参考)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) {
ライン 239: ライン 266:
         icon: image         icon: image
     });     });
 +
     google.maps.event.addListener(marker,​ "​click",​ function() {     google.maps.event.addListener(marker,​ "​click",​ function() {
         GoogleMapper.openMarkerWindow(marker);​         GoogleMapper.openMarkerWindow(marker);​
     });     });
 +
     GoogleMapper.markers.push(marker);​     GoogleMapper.markers.push(marker);​
  
ライン 255: ライン 284:
  ​* ​ @param ​ String ​             str         ​(Optional) マーカー上に表示する文字  ​* ​ @param ​ String ​             str         ​(Optional) マーカー上に表示する文字
  ​* ​ @return String or MarkerImage  ​* ​ @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,
ライン 281: ライン 311:
  ​* ​ @param ​ String ​             style       ​(Optional) 吹き出し形状(尻尾無しは"​bbT"​)  ​* ​ @param ​ String ​             style       ​(Optional) 吹き出し形状(尻尾無しは"​bbT"​)
  ​* ​ @return String or MarkerImage  ​* ​ @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": ​   //​左上に着地点
ライン 350: ライン 381:
     GoogleMapper.markers[index].setMap(null);​     GoogleMapper.markers[index].setMap(null);​
     GoogleMapper.markers.splice(index,​ 1);     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 = [];
 }; };
 /** /**
ライン 365: ライン 406:
  */  */
 GoogleMapper.getMarkerInfo = function(marker) { GoogleMapper.getMarkerInfo = function(marker) {
-    return marker.title;​+    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]; });
 }; };
 /** /**
ライン 378: ライン 429:
     }     }
  
-    GoogleMapper.closeInfoWindow(); +    ​var infoWindow = GoogleMapper.infoWindow;​ 
- +    infoWindow.setAnchor(null); //​非公式APIでいったんクリア 
-    ​var infoWindow ​= new google.maps.InfoWindow({ content: content, position: latLng });+    infoWindow.setOptions({ content: content, position: latLng });
     infoWindow.open(GoogleMapper.map,​ marker);     infoWindow.open(GoogleMapper.map,​ marker);
-    GoogleMapper.lastInfoWindow = infoWindow; 
 }; };
 /** /**
ライン 388: ライン 438:
  */  */
 GoogleMapper.closeInfoWindow = function() { GoogleMapper.closeInfoWindow = function() {
-    ​if (GoogleMapper.lastInfoWindow) { +    GoogleMapper.infoWindow.close();
-        ​GoogleMapper.lastInfoWindow.close(); +
-    }+
 }; };
 /** /**
ライン 410: ライン 458:
         }         }
     });     });
 +};
 +/**
 + ​* ​ 端末の現在位置を取得する
 + ​* ​ @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);​
 }; };
 /** /**
ライン 416: ライン 495:
  ​* ​ @param ​ Function ​   callback ​   (Optional) 検索結果が渡されるCallback関数  ​* ​ @param ​ Function ​   callback ​   (Optional) 検索結果が渡されるCallback関数
  ​* ​                                 渡されるのはGeocoderResponseの配列とGeocoderStatus  ​* ​                                 渡されるのはGeocoderResponseの配列とGeocoderStatus
- ​* ​ @see http://code.google.com/​intl/​ja/​apis/​maps/​documentation/​v3/reference.html#Geocoder+ ​* ​ @see https://developers.google.com/​maps/​documentation/​javascript/​reference#​Geocoder
  */  */
 GoogleMapper.search = function(keywords,​ callback) { GoogleMapper.search = function(keywords,​ callback) {
ライン 423: ライン 502:
     }     }
  
-    callback = callback || function (response, status) {+    callback = callback || function(response,​ status) {
         if (!GoogleMapper.checkResponseStatus(status)) {         if (!GoogleMapper.checkResponseStatus(status)) {
             return;             return;
ライン 432: ライン 511:
  
         if (len == 1) {         if (len == 1) {
-            var latLng ​= GoogleMapper.getGeocodeLatLng(response[0])+            var map = GoogleMapper.map; 
-            GoogleMapper.map.panTo(latLng);​ +            var result = response[0];​ 
-            ​GoogleMapper.openInfoWindow+            ​var latLng = GoogleMapper.getGeocodeLatLng(result);​ 
-                GoogleMapper.getGeocodeAddress(response[0]), +            ​map.panTo(latLng);​ 
-                ​latLng + 
-            ​);+            ​if (map.getZoom() < 14) { 
 +                ​map.setZoom(14);​ 
 +            } 
 + 
 +            GoogleMapper.openInfoWindow(GoogleMapper.getGeocodeAddress(result), latLng);
             return;             return;
-        } else if (len <= GoogleMapper.maxCount) {+        } else if (len < 20) {
             for (var i = 0; i < len; i++) {             for (var i = 0; i < len; i++) {
                 msg += "​・"​ + GoogleMapper.getGeocodeAddress(response[i]) + "​\n";​                 msg += "​・"​ + GoogleMapper.getGeocodeAddress(response[i]) + "​\n";​
ライン 455: ライン 538:
  ​* ​ @param ​ Function ​   callback ​   検索結果が渡されるCallback関数  ​* ​ @param ​ Function ​   callback ​   検索結果が渡されるCallback関数
  ​* ​                                 渡されるのはGeocoderResponseの配列とGeocoderStatus  ​* ​                                 渡されるのはGeocoderResponseの配列とGeocoderStatus
- ​* ​ @see http://code.google.com/​intl/​ja/​apis/​maps/​documentation/​v3/reference.html#Geocoder+ ​* ​ @see https://developers.google.com/​maps/​documentation/​javascript/​reference#​Geocoder
  */  */
 GoogleMapper.searchByLatLng = function(latLng,​ callback) { GoogleMapper.searchByLatLng = function(latLng,​ callback) {
ライン 461: ライン 544:
 }; };
 /** /**
- ​* ​ GeocoderStatusの内容をチェックする + ​* ​ GeocoderStatusおよびPlacesServiceStatusをチェックする 
- ​* ​ エラーの場合はalert()を表示する + ​*  ​該当データなし以外のエラーの場合はalert()を表示する 
- ​* ​ @param  ​GeocoderStatus ​ ​status+ ​* ​ @param  ​String ​ ​status
  ​* ​ @return Boolean true: OK, false: OK以外  ​* ​ @return Boolean true: OK, false: OK以外
  */  */
ライン 471: ライン 554:
             return true;             return true;
         case "​ZERO_RESULTS":​         case "​ZERO_RESULTS":​
-            alert("​該当する地域がありませんでした"​);​+            alert("​該当データがありませんでした"​);​
             break;             break;
         default:         default:
ライン 511: ライン 594:
  ​* ​ @param ​ String / LatLng point   ​地名 or 緯度経度  ​* ​ @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
  */  */
ライン 540: ライン 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 = "";​
ライン 553: ライン 636:
             renderer.setDirections(response);​             renderer.setDirections(response);​
         }         }
-    }+    });
- +
-    (new google.maps.DirectionsService()).route(request,​ callback);+
 }; };
 /** /**
ライン 568: ライン 649:
 }; };
 /** /**
- ​* ​ 地図上に広告(Google AdSense)を表示する+ *  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 ​ 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) {
ライン 641: ライン 785:
             return;             return;
         }         }
-        var duplicateMarker = function (origin) {+        var duplicateMarker = function(origin) {
             var marker = new google.maps.Marker({             var marker = new google.maps.Marker({
                 position: origin.position,​                 position: origin.position,​
ライン 657: ライン 801:
         }         }
     });     });
 +};
 +/**
 + ​* ​ consoleがある場合のみ、コンソールに出力する
 + ​* ​ @param ​ Object ​ value
 + */
 +GoogleMapper.log = function(value) {
 +    if (window.console && console.log) {
 +        console.log(value);​
 +    }
 }; };
 /​****************************************************************************** /​******************************************************************************
ライン 667: ライン 820:
  ​******************************************************************************/​  ​******************************************************************************/​
 GoogleMapper.demo = function(mapId,​ streetViewId,​ routerPanelId,​ keywordInputId) { GoogleMapper.demo = function(mapId,​ streetViewId,​ routerPanelId,​ keywordInputId) {
 +    var demo = GoogleMapper.demo;​
 +
     //​地図を表示(緯度経度ズームを渡さないと日本列島を表示する)     //​地図を表示(緯度経度ズームを渡さないと日本列島を表示する)
-    GoogleMapper.show(mapId);​+    ​var map = GoogleMapper.show(mapId);​
  
     //​マーカーを表示     //​マーカーを表示
-    ​var iconUrl = "//​google-maps-icons.googlecode.com/​files/​moderntower.png";​ +    var tokyo = GoogleMapper.addMarker(35.7,​ 139.7, "​東京"​);​
-    ​var tokyo = GoogleMapper.addMarker(35.7,​ 139.7, "​東京"​, iconUrl);+
     //​マーカー上に吹き出しを表示     //​マーカー上に吹き出しを表示
     GoogleMapper.openMarkerWindow(tokyo);​     GoogleMapper.openMarkerWindow(tokyo);​
ライン 678: ライン 832:
     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, "<那覇>");
  
     //​沖縄のミニ地図を表示     //​沖縄のミニ地図を表示
ライン 699: ライン 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();​
ライン 720: ライン 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 + '​)"​ /> ';
         }         }
  
ライン 727: ライン 881:
  
     //​道順の終点はマーカーでもOKにする     //​道順の終点はマーカーでもOKにする
 +    var getMarkerInfo = GoogleMapper.getMarkerInfo;​ //​オリジナルを退避
     GoogleMapper.getMarkerInfo = function(marker) {     GoogleMapper.getMarkerInfo = function(marker) {
-        if (GoogleMapper.demo.startFlg) {   ​//​スタート地点指定済みの場合 +        if (demo.startFlg) {    //​スタート地点指定済みの場合 
-            ​GoogleMapper.demo.startFlg = false;+            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.1302010784.txt.gz · 最終更新: 2011/04/05 22:39 (外部編集)