ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper-v3 [2011/11/08 23:00] – [サンプル] 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で暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。
  
行 16: 行 16:
 [[http://0-oo.net/sam/google-mapper/geolocation.php|Google Mapper V3で現在地を取得する動作サンプル(スマートフォンにも対応)]] [[http://0-oo.net/sam/google-mapper/geolocation.php|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/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/hotel/|ホテル 旅館 × 地図から検索]] (応用例 1)
行 32: 行 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版の場合もあります
行 59: 行 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, "那覇");
行 93: 行 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>
  
行 162: 行 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.6.1 +  @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/apis/maps/documentation/javascript/reference.html+
  */  */
 var GoogleMapper = { var GoogleMapper = {
行 208: 行 217:
   @param  Object  options (Optional) Mapに渡すパラメータ   @param  Object  options (Optional) Mapに渡すパラメータ
   @return Map   @return Map
-  @see http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions +  @see https://developers.google.com/maps/documentation/javascript/reference#MapOptions
- * +
-  stylesを確認できるツール +
-  @see http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html+
  */  */
 GoogleMapper.show = function(mapId, lat, lng, zoom, options) { GoogleMapper.show = function(mapId, lat, lng, zoom, options) {
行 245: 行 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) {
行 278: 行 284:
   @param  String              str         (Optional) マーカー上に表示する文字   @param  String              str         (Optional) マーカー上に表示する文字
   @return String or MarkerImage   @return String or MarkerImage
-  @see http://code.google.com/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) {
行 305: 行 311:
   @param  String              style       (Optional) 吹き出し形状(尻尾無しは"bbT"   @param  String              style       (Optional) 吹き出し形状(尻尾無しは"bbT"
   @return String or MarkerImage   @return String or MarkerImage
-  @see http://code.google.com/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) {
行 452: 行 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;
 }; };
 /** /**
行 466: 行 495:
   @param  Function    callback    (Optional) 検索結果が渡されるCallback関数   @param  Function    callback    (Optional) 検索結果が渡されるCallback関数
                                   渡されるのはGeocoderResponseの配列とGeocoderStatus                                   渡されるのはGeocoderResponseの配列とGeocoderStatus
-  @see http://code.google.com/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) {
行 509: 行 538:
   @param  Function    callback    検索結果が渡されるCallback関数   @param  Function    callback    検索結果が渡されるCallback関数
                                   渡されるのはGeocoderResponseの配列とGeocoderStatus                                   渡されるのはGeocoderResponseの配列とGeocoderStatus
-  @see http://code.google.com/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) {
行 622: 行 651:
   Google Placesに登録されているスポットを表示する(要Placesライブラリ)   Google Placesに登録されているスポットを表示する(要Placesライブラリ)
   @param  Number  iconSize    (Optional) アイコンの表示サイズ   @param  Number  iconSize    (Optional) アイコンの表示サイズ
-  @see http://code.google.com/apis/maps/documentation/javascript/places.html+  @see https://developers.google.com/maps/documentation/javascript/places
  */  */
 GoogleMapper.showPlaces = function(iconSize) { GoogleMapper.showPlaces = function(iconSize) {
行 688: 行 717:
   @param  ControlPosition position    (Optional) 地図上のどこに表示するか   @param  ControlPosition position    (Optional) 地図上のどこに表示するか
   @param  String          channel     (Optional) AdSenseのチャネル番号   @param  String          channel     (Optional) AdSenseのチャネル番号
-  @see http://code.google.com/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) {
行 797: 行 826:
  
     //マーカーを表示     //マーカーを表示
-    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);
javascript/google-mapper-v3.1320760823.txt.gz · 最終更新: 2011/11/08 23:00 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki