ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper-v3 [2011/03/21 23:03] – 使い方の説明を微改善 dgbadminjavascript:google-mapper-v3 [2015/09/22 14:38] (現在) – [ソースコード] 0.7.1 dgbadmin
行 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版の場合もあります
行 30: 行 40:
  
 ===== 使い方の例 ===== ===== 使い方の例 =====
 +
 +Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-)
  
 ==== Google Maps APIのJavaScriptを読み込む ==== ==== Google Maps APIのJavaScriptを読み込む ====
行 37: 行 49:
 }); });
 </code> </code>
- 
- 
-あとは、ソースコードの中のGoogleMapper.demo()を参考に。 ;-) 
- 
-例えばこんなことができる。 
  
 ==== Googleマップを表示する ==== ==== Googleマップを表示する ====
行 54: 行 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要素を用意して下記のようにすれば、地図とストリートビューを並べて表示でき
 <code javascript> <code javascript>
 GoogleMapper.setStreetView(streetViewId); GoogleMapper.setStreetView(streetViewId);
行 80: 行 89:
  
 ==== 広告(Google AdSense)を表示する ==== ==== 広告(Google AdSense)を表示する ====
-なお、AdSenseを表示するには、Google MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定する必要がある。+AdSenseを表示するには、あらかじめGoogle MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定しておく必要がある。
 <code javascript> <code javascript>
 GoogleMapper.load(function() { GoogleMapper.load(function() {
行 86: 行 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>
  
行 139: 行 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の配列を渡す
行 154: 行 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+
 }; };
 /** /**
行 182: 行 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);
 }; };
行 204: 行 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;
 }; };
 /** /**
行 225: 行 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) {
行 240: 行 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);
  
行 256: 行 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,
行 282: 行 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":    //左上に着地点
行 351: 行 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 = [];
 }; };
 /** /**
行 366: 行 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]; });
 }; };
 /** /**
行 379: 行 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; 
 }; };
 /** /**
行 389: 行 438:
  */  */
 GoogleMapper.closeInfoWindow = function() { GoogleMapper.closeInfoWindow = function() {
-    if (GoogleMapper.lastInfoWindow) { +    GoogleMapper.infoWindow.close();
-        GoogleMapper.lastInfoWindow.close(); +
-    }+
 }; };
 /** /**
行 411: 行 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);
 }; };
 /** /**
行 417: 行 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) {
行 424: 行 502:
     }     }
  
-    callback = callback || function (response, status) {+    callback = callback || function(response, status) {
         if (!GoogleMapper.checkResponseStatus(status)) {         if (!GoogleMapper.checkResponseStatus(status)) {
             return;             return;
行 433: 行 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";
行 456: 行 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) {
行 462: 行 544:
 }; };
 /** /**
-  GeocoderStatusの内容をチェックする +  GeocoderStatusおよびPlacesServiceStatusをチェックする 
-  エラーの場合はalert()を表示する + *  該当データなし以外のエラーの場合はalert()を表示する 
-  @param  GeocoderStatus  status+  @param  String  status
   @return Boolean true: OK, false: OK以外   @return Boolean true: OK, false: OK以外
  */  */
行 472: 行 554:
             return true;             return true;
         case "ZERO_RESULTS":         case "ZERO_RESULTS":
-            alert("該当する地域がありませんでした");+            alert("該当データがありませんでした");
             break;             break;
         default:         default:
行 512: 行 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
  */  */
行 541: 行 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 = "";
行 554: 行 636:
             renderer.setDirections(response);             renderer.setDirections(response);
         }         }
-    }+    });
- +
-    (new google.maps.DirectionsService()).route(request, callback);+
 }; };
 /** /**
行 569: 行 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) {
行 642: 行 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,
行 658: 行 801:
         }         }
     });     });
 +};
 +/**
 +  consoleがある場合のみ、コンソールに出力する
 +  @param  Object  value
 + */
 +GoogleMapper.log = function(value) {
 +    if (window.console && console.log) {
 +        console.log(value);
 +    }
 }; };
 /****************************************************************************** /******************************************************************************
行 668: 行 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);
行 679: 行 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, "<那覇>");
  
     //沖縄のミニ地図を表示     //沖縄のミニ地図を表示
行 700: 行 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();
行 721: 行 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 + ')" /> ';
         }         }
  
行 728: 行 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.txt · 最終更新: 2015/09/22 14:38 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki