ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
javascript:google-mapper [2009/06/07 22:46]
dgbadmin
javascript:google-mapper [2015/09/22 14:29] (現在)
dgbadmin [ダウンロード]
行 2: 行 2:
  
 (更新履歴とコメントは[[http://0-oo.net/log/category/javascript/google-mapper/|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。) (更新履歴とコメントは[[http://0-oo.net/log/category/javascript/google-mapper/|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。)
 +
 +※Google Maps API V3を使いたい場合は、[[google-mapper-v3|Google Mapper V3]]をどうぞ。8-)
 +
 +{{:php-tool-box:map-japan.gif|}}
  
 Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。\\ Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。\\
行 9: 行 13:
   * マーカーのアイコン画像を色を指定するだけで手軽に作成   * マーカーのアイコン画像を色を指定するだけで手軽に作成
   * マーカーが表示範囲外にある場合、それが分かるように表示   * マーカーが表示範囲外にある場合、それが分かるように表示
 +
 +バージョン0.2.0からは、左下に検索ボックスを表示するようにした。また、マウスホイールのスクロールによるズームにも対応した。
  
  
 ===== サンプル ===== ===== サンプル =====
 +[[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]]
 +
 +[[http://0-oo.net/misc/wikipedia-map|ものすごい地図 - 伝説のリョコウバトのように日本、アメリカ、ヨーロッパ、そして世界を覆い尽くすものそれは...]]
  
  
行 19: 行 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>
  
行 47: 行 50:
  
 ===== ダウンロード ===== ===== ダウンロード =====
-[[http://0-oo.net/js/GoogleMapper.js|GoogleMapper.js]]+[[http://g.0-oo.net/google-mapper.js|google-mapper.js]]
  
 ※ダウンロードできるのは最新のBeta版の場合もあります ※ダウンロードできるのは最新のBeta版の場合もあります
行 55: 行 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.1.0 +  @version   0.2.1 
-  @copyright 2008 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/ +  @see http://code.google.com/intl/en/apis/maps/documentation/reference.html
-  @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html+
  */  */
 var GoogleMapper = { var GoogleMapper = {
行 69: 行 71:
       マーカーを表示する位置情報       マーカーを表示する位置情報
       (例)       (例)
-      GoogleMapper.points =[+      GoogleMapper.points = [
           {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true},           {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true},
           {lat: 35.2, lng: 136.9, title: "Nagoya"},           {lat: 35.2, lng: 136.9, title: "Nagoya"},
-          {lat: 34.7, lng: 135.5, title: "Osaka", soulFood: "Takoyaki"}+          {lat: 34.7, lng: 135.5, title: "Osaka"}
       ];       ];
       ・lat, lngは必須       ・lat, lngは必須
       ・titleはMarkerにマウスカーソルを当てたときに表示される       ・titleはMarkerにマウスカーソルを当てたときに表示される
       ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される       ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される
-      ・その他は getInfoHtml() で使めに必要なデータなどを入れておく+     *  ・iconにGIconをセットすると個別のiconを表示できる 
 +     *  ・その他に getInfoHtml() で使データを入れてもOK
      */      */
     points: [],     points: [],
 +    
 +    /**
 +      地図をクリックされた時に情報Windowを表示するかどうか
 +      trueにすると、副作用としてダブルクリックによるズームを無効にする
 +     */
 +    pointable: false,
 +    
 +    /**
 +      検索結果に表示されるAdSenseの設定
 +      (例)
 +      GoogleMapper.barAdsOptions = {
 +          client: "partner-pub-xxxxxxxxxxxxxxxx",
 +          channel: "xxxxxxxxxx"
 +      };
 +     */
 +    barAdsOptions: {},
 +    
     /** loadしたGMap2オブジェクトがセットされる */     /** loadしたGMap2オブジェクトがセットされる */
     map: null,     map: null,
 +    
     /** サイトごとのカスタマイズをするための関数群 */     /** サイトごとのカスタマイズをするための関数群 */
     custom: {}     custom: {}
行 107: 行 128:
         }         }
                  
-        var map = GoogleMapper.map = new GMap2(document.getElementById(mapId));+        var map = (GoogleMapper.map = new GMap2(document.getElementById(mapId), { 
 +            googleBarOptions:
 +                style: "new",   //新バージョンの検索窓 
 +                adsOptions: GoogleMapper.barAdsOptions 
 +            } 
 +        })); 
 +        
 +        GoogleMapper.setupMap(map);
                  
-        //地図タイプの設定 +        GoogleMapper.custom.initCallback();
-        // @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GMapType +
-        map.addMapType(G_PHYSICAL_MAP); +
-        map.setMapType(GoogleMapper.custom.getInitialMapType()); +
-         +
-        //コントロールを追加 +
-        // @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GControlImpl +
-        map.addControl(new GLargeMapControl()); +
-        map.addControl(new GScaleControl()); +
-        map.addControl(new GMapTypeControl()); +
-        map.addControl(new GOverviewMapControl());+
                  
         //地図を表示         //地図を表示
         map.setCenter(new GLatLng(lat, lng), zoom);         map.setCenter(new GLatLng(lat, lng), zoom);
                  
 +        //マーカーを表示
         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);
         }         }
     });     });
 +};
 +/**
 +  地図の表示設定をする
 +  @param  GMap2   map
 + */
 +GoogleMapper.setupMap = function(map) {
 +    var ui = map.getDefaultUI();
 +    
 +    if (ui.controls.scalecontrol) { //largeの場合のみtrueになっている
 +        ui.controls.scalecontrol = false;           //縮尺
 +        map.enableGoogleBar();                      //統合検索コントロール
 +        map.addControl(new GOverviewMapControl());  //概観地図
 +    }
 +    
 +    if (GoogleMapper.pointable) {
 +        ui.zoom.doubleclick = false;    //ダブルクリックによるズーム
 +        
 +        //地図をクリックされた時のイベント
 +        GEvent.addListener(map, "click", function(overlay, latlng) {
 +            if (latlng) {   //Windowを閉じる時のクリックは無視
 +                map.openInfoWindowHtml(
 +                    latlng, GoogleMapper.custom.getClickInfoHtml(latlng)
 +                );
 +            }
 +        });
 +    }
 +
 +    map.setUI(ui);
 +    map.enableContinuousZoom();     //滑らかなズームを有効にする
 }; };
 /** /**
   マーカーを追加する   マーカーを追加する
-  @param  GIcon   icon 
   @param  Object  point   @param  Object  point
 +  @param  GIcon   defaultIcon
 +  @return GMarker
  */  */
-GoogleMapper.addMarker = function(iconpoint) { +GoogleMapper.addMarker = function(pointdefaultIcon) { 
-    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.latpoint.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);+
 }; };
  
  
-//以下はサイトに合わせて上書きする関数 
  
 +/******************************************************************************
 +  以下はサイトに合わせて上書きする関数
 + ******************************************************************************/
 +
 +/**
 +  Google Mapsが使用できない環境の場合に呼ばれる
 + */
 +GoogleMapper.custom.onUnavailable = function() {
 +    alert("このブラウザでは地図を表示できません");
 +};
 /** /**
   マーカーの画像を返す   マーカーの画像を返す
行 171: 行 235:
     return MapIconMaker.createMarkerIcon({     return MapIconMaker.createMarkerIcon({
         //Sample         //Sample
-        width: 32, height: 32, +        primaryColor: "#00FFFF", strokeColor: "#666666"
-        primaryColor: "#00FFFFFF", cornerColor: "#0099FFFF", strokeColor: "#666666FF"+
     });     });
 }; };
 /** /**
   マーカーに表示する吹き出しの中身のHTMLを作成して返す   マーカーに表示する吹き出しの中身のHTMLを作成して返す
 +  @param  Object  point   マーカー情報
  */  */
 GoogleMapper.custom.getInfoHtml = function(point) { GoogleMapper.custom.getInfoHtml = function(point) {
     //Sample     //Sample
-    if (point.soulFood) { +    return point.title;
-        return point.soulFood + " 大好き!"; +
-    } else { +
-        return point.title; +
-    }+
 }; };
 /** /**
- *  初期表示地図タイプを返す+ *  地図をクリックされた時に表示する吹き出し中身のHTML作成して返す 
 +  (GoogleMapper.pointable = true の場合のみ有効) 
 +  @param  GLatlng     latlng  緯度経度
  */  */
-GoogleMapper.custom.getInitialMapType = function() { +GoogleMapper.custom.getClickInfoHtml = function(latlng) { 
-    return G_NORMAL_MAP;+    //Sample 
 +    var info = "緯度: " + latlng.lat() + "<br />経度: " + latlng.lng(); 
 +    info += "<br />ズーム: " + GoogleMapper.map.getZoom(); 
 +    return info;
 }; };
 /** /**
- *  Google Mapsが使用できない環境場合に呼ばれる+ *  初期表示時コールバック関数
  */  */
-GoogleMapper.custom.onUnavailable = function() { +GoogleMapper.custom.initCallback = function() { /* pass */ };
-    alert("このブラウザでは地図を表示できません"); +
-};+
 </code> </code>
  
javascript/google-mapper.1244382364.txt.gz · 最終更新: 2009/06/07 22:46 by dgbadmin