ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール

現在位置: ゼロと無限の間に » JavaScript玉手箱 » Google Mapsをほどよくカスタマイズしてお手軽に表示 - Google Mapper
トレース:
javascript:google-mapper

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
javascript:google-mapper [2010/02/02 06:31]
dgbadmin 		javascript:google-mapper [2015/09/22 14:29] (現在)
dgbadmin [ダウンロード]
行 18: 行 18:
  
 ===== サンプル ===== ===== サンプル =====
 +[[http://0-oo.net/sam/google-mapper/v2.php|Google Mapper (V2) 動作サンプル]]
 +
 [[http://0-oo.net/aqua/|Japan Aquaria Map and Photos]] [[http://0-oo.net/aqua/|Japan Aquaria Map and Photos]]
  
行 27: 行 29:
 <code html> <code html>
 <script type="text/javascript" src="http://www.google.co.jp/jsapi?key=[自分のGoogle MapsのAPI KEY]"></script> <script type="text/javascript" src="http://www.google.co.jp/jsapi?key=[自分のGoogle MapsのAPI KEY]"></script>
- +<script type="text/javascript" src="/js/google-mapper.js"></script>
-<!-- （使いたい場合のみ）範囲外のマーカーを表示 --> +
-<script type="text/javascript" src="http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/release/src/markertracker_packed.js"></script> +
- +
-<!-- （使いたい場合のみ）マーカーのアイコンを簡単作成 --> +
-<script type="text/javascript" src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/release/src/mapiconmaker_packed.js"></script> +
- +
-<script type="text/javascript" src="/js/GoogleMapper.js"></script>+
 </code> </code>
  
行 55: 行 50:
  
 ===== ダウンロード ===== ===== ダウンロード =====
-[[http://0-oo.net/js/GoogleMapper.js|GoogleMapper.js]]+[[http://g.0-oo.net/google-mapper.js|google-mapper.js]]
  
 ※ダウンロードできるのは最新のBeta版の場合もあります ※ダウンロードできるのは最新のBeta版の場合もあります
行 63: 行 58:
 <code javascript> <code javascript>
 /** /**
- *  GoogleMapper.js+ *  GoogleMapper.js - (The Wrapper Class of Google Maps API V2)
  *  @see       http://0-oo.net/sbox/javascript/google-mapper  *  @see       http://0-oo.net/sbox/javascript/google-mapper
- *  @version   0.2.0 + *  @version   0.2.1 
- *  @copyright 2008-2009 dgbadmin@gmail.com+ *  @copyright 2008-2010 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)
  *  *
- *  Also see Google Maps API documents. + *  See also Google Maps API documents. 
- *  @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html+ *  @see http://code.google.com/intl/en/apis/maps/documentation/reference.html
  */  */
 var GoogleMapper = { var GoogleMapper = {
行 84: 行 79:
      *  ・titleはMarkerにマウスカーソルを当てたときに表示される      *  ・titleはMarkerにマウスカーソルを当てたときに表示される
      *  ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される      *  ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される
 +     *  ・iconにGIconをセットすると個別のiconを表示できる
      *  ・その他に getInfoHtml() で使いたいデータを入れてもOK      *  ・その他に getInfoHtml() で使いたいデータを入れてもOK
      */      */
行 149: 行 145:
         var icon = GoogleMapper.custom.getIcon();         var icon = GoogleMapper.custom.getIcon();
         for (var i = 0; i < GoogleMapper.points.length; i++) {         for (var i = 0; i < GoogleMapper.points.length; i++) {
-            GoogleMapper.addMarker(icon, GoogleMapper.points[i]);+            GoogleMapper.addMarker(GoogleMapper.points[i], icon);
         }         }
     });     });
行 184: 行 180:
 /** /**
  *  マーカーを追加する  *  マーカーを追加する
- *  @param  GIcon   icon 
  *  @param  Object  point  *  @param  Object  point
 + *  @param  GIcon   defaultIcon
 + *  @return GMarker
  */  */
-GoogleMapper.addMarker = function(icon, point) { +GoogleMapper.addMarker = function(point, defaultIcon) { 
-    var marker = new GMarker( +    var option = { title: point.title, icon: point.icon || defaultIcon };
-        new GLatLng(point.lat, point.lng), {title: point.title, icon: icon} +
-    ); +
-    GoogleMapper.map.addOverlay(marker);+
          
     var info = GoogleMapper.custom.getInfoHtml(point);     var info = GoogleMapper.custom.getInfoHtml(point);
 +    if (!info) {
 +        option.clickable = false;
 +    }
          
-    //クリックされたら吹き出しを表示する +    var marker = new GMarker(new GLatLng(point.lat, point.lng), option); 
-    GEvent.addListener(marker, 'click', function(){ this.openInfoWindowHtml(info); });+    GoogleMapper.map.addOverlay(marker);
          
-    if (point.openFlg) {    //最初から吹き出しを表示する +    if (info) { 
-        marker.openInfoWindowHtml(info);+        //クリックされたら吹き出しを表示する 
 +        GEvent.addListener(marker, "click", function(){ this.openInfoWindowHtml(info); }); 
 +         
 +        if (point.openFlg) {    //最初から吹き出しを表示する 
 +            marker.openInfoWindowHtml(info); 
 +        }
     }     }
          
-    if (!window["MarkerTracker"]) { +    if (window["MarkerTracker"]) { 
-        return;+        //現在の表示範囲の外にあるマーカーが分かるようにする 
 +        // @see http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/ 
 +        (new MarkerTracker(marker, GoogleMapper.map));
     }     }
-    //現在の表示範囲の外にあるマーカーが分かるようにする +     
-    // @see http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/ +    return marker;
-    (new MarkerTracker(marker, GoogleMapper.map));+
 }; };
  
行 232: 行 235:
     return MapIconMaker.createMarkerIcon({     return MapIconMaker.createMarkerIcon({
         //Sample         //Sample
-        width: 32, height: 32, +        primaryColor: "#00FFFF", strokeColor: "#666666"
-        primaryColor: "#00FFFFFF", cornerColor: "#0099FFFF", strokeColor: "#666666FF"+
     });     });
 }; };
javascript/google-mapper.1265059874.txt.gz · 最終更新: 2010/02/02 06:31 by dgbadmin

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki