javascript:google-mapper
文書の過去の版を表示しています。
Google Mapsをほどよくカスタマイズしてお手軽に表示 - Google Mapper
(更新履歴とコメントはGoogle Mapper Archive - ゼロと無限の間のログでどうぞ。)
※Google Maps API V3を使いたい場合は、Google Mapper V3をどうぞ。
Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。
マーカーの表示も使いたいので、配列に位置情報を入れておけばマーカーが表示できるようにした。
久しぶりにGoogle Maps APIを読み返した(意外に変わってた)ら、便利そうなライブラリ(gmaps-utility-library)を見つけたのでついでに下記を取り込んでみた。
- マーカーのアイコン画像を色を指定するだけで手軽に作成
- マーカーが表示範囲外にある場合、それが分かるように表示
バージョン0.2.0からは、左下に検索ボックスを表示するようにした。また、マウスホイールのスクロールによるズームにも対応した。
サンプル
使い方の例
事前にJavaScriptを読み込む。
<script type="text/javascript" src="http://www.google.co.jp/jsapi?key=[自分のGoogle MapsのAPI KEY]"></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>
後は表示するだけ。
//(マーカーを表示したい場合のみ)マーカーを表示する位置情報をセット GoogleMapper.points = [ {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true}, {lat: 35.2, lng: 136.9, title: "Nagoya"}, {lat: 34.7, lng: 135.5, title: "Osaka", soulFood: "Takoyaki"} ]; //地図を表示する要素(divなど)のidと緯度・経度・ズーム値を指定して表示する GoogleMapper.load("map", 37, 136, 6);
ライセンス
MITライセンスで。
ダウンロード
※ダウンロードできるのは最新のBeta版の場合もあります
ソースコード
/** * GoogleMapper.js * @see http://0-oo.net/sbox/javascript/google-mapper * @version 0.2.0 * @copyright 2008-2009 dgbadmin@gmail.com * @license http://0-oo.net/pryn/MIT_license.txt (The MIT license) * * Also see Google Maps API documents. * @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html */ var GoogleMapper = { /** * マーカーを表示する位置情報 * (例) * GoogleMapper.points = [ * {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true}, * {lat: 35.2, lng: 136.9, title: "Nagoya"}, * {lat: 34.7, lng: 135.5, title: "Osaka"} * ]; * ・lat, lngは必須 * ・titleはMarkerにマウスカーソルを当てたときに表示される * ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される * ・その他に getInfoHtml() で使いたいデータを入れてもOK */ points: [], /** * 地図をクリックされた時に情報Windowを表示するかどうか * trueにすると、副作用としてダブルクリックによるズームを無効にする */ pointable: false, /** * 検索結果に表示されるAdSenseの設定 * (例) * GoogleMapper.barAdsOptions = { * client: "partner-pub-xxxxxxxxxxxxxxxx", * channel: "xxxxxxxxxx" * }; */ barAdsOptions: {}, /** loadしたGMap2オブジェクトがセットされる */ map: null, /** サイトごとのカスタマイズをするための関数群 */ custom: {} }; /** * @param String mapId 地図表示に使う要素(div等)のid属性 * @param Float lat 初期表示する中心地点の緯度 * @param Float lng 初期表示する中心地点の経度 * @param Integer zoom 初期表示するズーム値 * @param Object loadOptions (省略可)Google Mapsをload時のオプション */ GoogleMapper.load = function(mapId, lat, lng, zoom, loadOptions) { // @see http://code.google.com/intl/ja/apis/ajax/documentation/#GoogleLoad google.load("maps", "2", loadOptions); google.setOnLoadCallback(function() { //IEのメモリリーク対策 // @see http://code.google.com/intl/ja/apis/maps/documentation/#Memory_Leaks document.getElementsByTagName("body")[0].onunload = GUnload; //ブラウザが対応しているかチェック if (!GBrowserIsCompatible()) { GoogleMapper.custom.onUnavailable(); return; } var map = (GoogleMapper.map = new GMap2(document.getElementById(mapId), { googleBarOptions: { style: "new", //新バージョンの検索窓 adsOptions: GoogleMapper.barAdsOptions } })); GoogleMapper.setupMap(map); GoogleMapper.custom.initCallback(); //地図を表示 map.setCenter(new GLatLng(lat, lng), zoom); //マーカーを表示 var icon = GoogleMapper.custom.getIcon(); for (var i = 0; i < GoogleMapper.points.length; i++) { GoogleMapper.addMarker(icon, GoogleMapper.points[i]); } }); }; /** * 地図の表示設定をする * @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 */ GoogleMapper.addMarker = function(icon, point) { var marker = new GMarker( new GLatLng(point.lat, point.lng), {title: point.title, icon: icon} ); GoogleMapper.map.addOverlay(marker); var info = GoogleMapper.custom.getInfoHtml(point); //クリックされたら吹き出しを表示する GEvent.addListener(marker, 'click', function(){ this.openInfoWindowHtml(info); }); if (point.openFlg) { //最初から吹き出しを表示する marker.openInfoWindowHtml(info); } if (!window["MarkerTracker"]) { return; } //現在の表示範囲の外にあるマーカーが分かるようにする // @see http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/ (new MarkerTracker(marker, GoogleMapper.map)); }; /****************************************************************************** * 以下はサイトに合わせて上書きする関数 ******************************************************************************/ /** * Google Mapsが使用できない環境の場合に呼ばれる */ GoogleMapper.custom.onUnavailable = function() { alert("このブラウザでは地図を表示できません"); }; /** * マーカーの画像を返す */ GoogleMapper.custom.getIcon = function() { if (!window["MapIconMaker"]) { return G_DEFAULT_ICON; } // @see http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/ return MapIconMaker.createMarkerIcon({ //Sample width: 32, height: 32, primaryColor: "#00FFFFFF", cornerColor: "#0099FFFF", strokeColor: "#666666FF" }); }; /** * マーカーに表示する吹き出しの中身のHTMLを作成して返す * @param Object point マーカー情報 */ GoogleMapper.custom.getInfoHtml = function(point) { //Sample return point.title; }; /** * 地図をクリックされた時に表示する吹き出しの中身のHTMLを作成して返す * (GoogleMapper.pointable = true の場合のみ有効) * @param GLatlng latlng 緯度経度 */ GoogleMapper.custom.getClickInfoHtml = function(latlng) { //Sample var info = "緯度: " + latlng.lat() + "<br />経度: " + latlng.lng(); info += "<br />ズーム: " + GoogleMapper.map.getZoom(); return info; }; /** * 初期表示時のコールバック関数 */ GoogleMapper.custom.initCallback = function() { /* pass */ };
javascript/google-mapper.1265059874.txt.gz · 最終更新: 2010/02/02 06:31 by dgbadmin