ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper-v3 [2010/05/17 22:34] – ダウンロード元変更 dgbadminjavascript:google-mapper-v3 [2015/09/22 14:38] (現在) – [ソースコード] 0.7.1 dgbadmin
行 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はまだLabs版で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.1 +  @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 or LatLng    point   地名 or LatLngオブジェクト +  @param  String LatLng point   地名 or 緯度経度 
-  @param  Boolean             walkFlg (Optional) 徒歩の道順にするかどうか +  @param  String          mode    (Optional) 移動手段(省略すると車) 
-                                                 省略すると車の道順になる +                                             TravelMode定数のどれか 
-  @param  String              panelId (Optional) 道順の説明を表示するdiv等のid+  @param  String          panelId (Optional) 道順の説明を表示するdiv等のid
  */  */
-GoogleMapper.direct = function(point, walkFlg, panelId) {+GoogleMapper.direct = function(point, mode, panelId) {
     if (!GoogleMapper._router) {    //1回目の呼び出しの場合     if (!GoogleMapper._router) {    //1回目の呼び出しの場合
-        GoogleMapper._router = { from: point, walkFlgwalkFlg, panelId: panelId };+        GoogleMapper._router = { from: point, modemode, panelId: panelId };
         return;         return;
     }     }
行 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;
     panelId = (panelId || router.panelId);     panelId = (panelId || router.panelId);
 +
     if (panelId) {  //道順の詳細を別パネルに表示する場合     if (panelId) {  //道順の詳細を別パネルに表示する場合
-        var panel = document.getElementById(panelId); +        panel = document.getElementById(panelId); 
-        panel.innerHTML = "";+        panel.innerHTML = "データを取得しています<br />しばらくお待ちください";
         renderer.setPanel(panel);         renderer.setPanel(panel);
-    } 
-     
-    var mode = google.maps.DirectionsTravelMode.DRIVING; 
-    if (walkFlg || router.walkFlg) { 
-        mode = google.maps.DirectionsTravelMode.WALKING; 
     }     }
  
行 221: 行 623:
         origin: router.from,         origin: router.from,
         destination: point,         destination: point,
-        travelMode: mode, +        travelMode: (mode || router.mode || google.maps.TravelMode.DRIVING)
-        provideTripAlternatives: 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) { 
 +            panel.innerHTML = ""; 
 +        } 
         if (GoogleMapper.checkResponseStatus(status)) {         if (GoogleMapper.checkResponseStatus(status)) {
             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) { 
-        address +" " + components[i].long_name+            if (!GoogleMapper.checkResponseStatus(status)) { 
-    +                return; 
-    return address.substring(1);+            } 
 + 
 +            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; 
 +                } 
 +            } 
 +        
 +    );
 }; };
 /** /**
- *  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");
行 285: 行 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),    //沖縄本島の中心あたり
行 312: 行 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"; };
行 329: 行 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);
 +    }
 }; };
 /****************************************************************************** /******************************************************************************
行 347: 行 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);
  
     //地図上をクリック可能にする     //地図上をクリック可能にする
行 376: 行 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(walkFlg) { +        demo.startRouting = function(mode) { 
-         GoogleMapper.demo.startFlg = true; +            GoogleMapper.mapClickable = false; 
-            GoogleMapper.direct(latLng, walkFlg, routerPanelId);+            demo.startFlg = true; 
 +            GoogleMapper.direct(latLng, mode, routerPanelId);
             GoogleMapper.closeInfoWindow();             GoogleMapper.closeInfoWindow();
         };         };
-        var btn = '<input type="button" onclick="GoogleMapper.demo.startRouting('; 
         h += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />";         h += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />";
-        h += btn + 'false)" value="ドライブの場合" /> '; +        var modes = { 
-        h += btn + 'true)" value="歩きの場合" />';+            DRIVING: "車", 
 +            //BICYCLING: "自転車",  //日本は未対応 
 +            WALKING: "歩き" 
 +        }; 
 +        for (var mode in modes) { 
 +            h += '<input type="button" value="' + modes[mode] + 'の場合"'; 
 +            h += ' onclick="GoogleMapper.demo.startRouting('; 
 +            h += 'google.maps.TravelMode.' + mode + ')" /> '; 
 +        }
  
         return h;   //戻り値が吹き出しに表示される         return h;   //戻り値が吹き出しに表示される
行 396: 行 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); 
-        GoogleMapper.search(document.getElementById(keywordInputId).value);+    demo.search = function() { 
 +        GoogleMapper.search(searchBox.value)
 +        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