javascript:google-mapper
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
javascript:google-mapper [2009/06/02 23:26] – dgbadmin | javascript:google-mapper [2015/09/22 14:29] (現在) – [ダウンロード] dgbadmin | ||
---|---|---|---|
行 2: | 行 2: | ||
(更新履歴とコメントは[[http:// | (更新履歴とコメントは[[http:// | ||
+ | |||
+ | ※Google Maps API V3を使いたい場合は、[[google-mapper-v3|Google Mapper V3]]をどうぞ。8-) | ||
+ | |||
+ | {{: | ||
Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。\\ | Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。\\ | ||
行 9: | 行 13: | ||
* マーカーのアイコン画像を色を指定するだけで手軽に作成 | * マーカーのアイコン画像を色を指定するだけで手軽に作成 | ||
* マーカーが表示範囲外にある場合、それが分かるように表示 | * マーカーが表示範囲外にある場合、それが分かるように表示 | ||
+ | |||
+ | バージョン0.2.0からは、左下に検索ボックスを表示するようにした。また、マウスホイールのスクロールによるズームにも対応した。 | ||
===== サンプル ===== | ===== サンプル ===== | ||
+ | [[http:// | ||
+ | |||
[[http:// | [[http:// | ||
+ | |||
+ | [[http:// | ||
行 19: | 行 29: | ||
<code html> | <code html> | ||
<script type=" | <script type=" | ||
- | + | <script type=" | |
- | <!-- 範囲外のマーカーを表示 --> | + | |
- | <script type=" | + | |
- | + | ||
- | <!-- マーカーのアイコンを簡単作成 --> | + | |
- | <script type=" | + | |
- | + | ||
- | <script type=" | + | |
</ | </ | ||
後は表示するだけ。 | 後は表示するだけ。 | ||
<code javascript> | <code javascript> | ||
- | // | + | //(マーカーを表示したい場合のみ)マーカーを表示する位置情報をセット |
GoogleMapper.points = [ | GoogleMapper.points = [ | ||
{lat: 35.7, lng: 139.7, title: " | {lat: 35.7, lng: 139.7, title: " | ||
行 47: | 行 50: | ||
===== ダウンロード ===== | ===== ダウンロード ===== | ||
- | [[http:// | + | [[http://g.0-oo.net/google-mapper.js|google-mapper.js]] |
※ダウンロードできるのは最新のBeta版の場合もあります | ※ダウンロードできるのは最新のBeta版の場合もあります | ||
行 55: | 行 58: | ||
<code javascript> | <code javascript> | ||
/** | /** | ||
- | | + | |
| | ||
- | | + | |
- | | + | |
| | ||
* | * | ||
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
var GoogleMapper = { | var GoogleMapper = { | ||
行 69: | 行 71: | ||
| | ||
| | ||
- | | + | |
| | ||
| | ||
- | | + | |
| | ||
| | ||
| | ||
| | ||
- | | + | * ・iconにGIconをセットすると個別のiconを表示できる |
+ | * ・その他に getInfoHtml() で使いたいデータを入れてもOK | ||
*/ | */ | ||
points: [], | points: [], | ||
+ | | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | pointable: false, | ||
+ | | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | 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: " | ||
+ | adsOptions: GoogleMapper.barAdsOptions | ||
+ | } | ||
+ | })); | ||
+ | |||
+ | GoogleMapper.setupMap(map); | ||
| | ||
- | | + | GoogleMapper.custom.initCallback(); |
- | // @see http:// | + | |
- | map.addMapType(G_PHYSICAL_MAP); | + | |
- | map.setMapType(GoogleMapper.custom.getInitialMapType()); | + | |
- | + | ||
- | // | + | |
- | // @see http:// | + | |
- | map.addControl(new GLargeMapControl()); | + | |
- | map.addControl(new GScaleControl()); | + | |
- | map.addControl(new GMapTypeControl()); | + | |
- | map.addControl(new GOverviewMapControl()); | + | |
| | ||
// | // | ||
map.setCenter(new GLatLng(lat, | map.setCenter(new GLatLng(lat, | ||
| | ||
+ | // | ||
var icon = GoogleMapper.custom.getIcon(); | var icon = GoogleMapper.custom.getIcon(); | ||
for (var i = 0; i < GoogleMapper.points.length; | for (var i = 0; i < GoogleMapper.points.length; | ||
- | GoogleMapper.addMarker(icon, GoogleMapper.points[i]); | + | GoogleMapper.addMarker(GoogleMapper.points[i], icon); |
} | } | ||
}); | }); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.setupMap = function(map) { | ||
+ | var ui = map.getDefaultUI(); | ||
+ | | ||
+ | if (ui.controls.scalecontrol) { // | ||
+ | ui.controls.scalecontrol = false; | ||
+ | map.enableGoogleBar(); | ||
+ | map.addControl(new GOverviewMapControl()); | ||
+ | } | ||
+ | | ||
+ | if (GoogleMapper.pointable) { | ||
+ | ui.zoom.doubleclick = false; | ||
+ | | ||
+ | // | ||
+ | GEvent.addListener(map, | ||
+ | if (latlng) { // | ||
+ | map.openInfoWindowHtml( | ||
+ | latlng, GoogleMapper.custom.getClickInfoHtml(latlng) | ||
+ | ); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | map.setUI(ui); | ||
+ | map.enableContinuousZoom(); | ||
}; | }; | ||
/** | /** | ||
| | ||
- | | ||
| | ||
+ | | ||
+ | | ||
*/ | */ | ||
- | GoogleMapper.addMarker = function(icon, point) { | + | GoogleMapper.addMarker = function(point, defaultIcon) { |
- | var marker | + | var option |
- | new GLatLng(point.lat, | + | |
- | ); | + | |
- | GoogleMapper.map.addOverlay(marker); | + | |
| | ||
var info = GoogleMapper.custom.getInfoHtml(point); | var info = GoogleMapper.custom.getInfoHtml(point); | ||
+ | if (!info) { | ||
+ | option.clickable = false; | ||
+ | } | ||
| | ||
- | | + | |
- | GEvent.addListener(marker, | + | GoogleMapper.map.addOverlay(marker); |
| | ||
- | if (point.openFlg) { // | + | |
- | marker.openInfoWindowHtml(info); | + | // |
+ | GEvent.addListener(marker, | ||
+ | |||
+ | | ||
+ | marker.openInfoWindowHtml(info); | ||
+ | } | ||
} | } | ||
| | ||
- | if (!window[" | + | if (window[" |
- | | + | |
+ | // @see http:// | ||
+ | (new MarkerTracker(marker, | ||
} | } | ||
- | | + | |
- | | + | |
- | new MarkerTracker(marker, GoogleMapper.map); | + | |
}; | }; | ||
- | // | ||
+ | / | ||
+ | | ||
+ | | ||
+ | |||
+ | /** | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.custom.onUnavailable = function() { | ||
+ | alert(" | ||
+ | }; | ||
/** | /** | ||
| | ||
行 171: | 行 235: | ||
return MapIconMaker.createMarkerIcon({ | return MapIconMaker.createMarkerIcon({ | ||
//Sample | //Sample | ||
- | | + | primaryColor: |
- | | + | |
}); | }); | ||
}; | }; | ||
/** | /** | ||
| | ||
+ | | ||
*/ | */ | ||
GoogleMapper.custom.getInfoHtml = function(point) { | GoogleMapper.custom.getInfoHtml = function(point) { | ||
//Sample | //Sample | ||
- | | + | return point.title; |
- | return point.soulFood + " 大好き!"; | + | |
- | } else { | + | |
- | | + | |
- | } | + | |
}; | }; | ||
/** | /** | ||
- | | + | |
+ | | ||
+ | | ||
*/ | */ | ||
- | GoogleMapper.custom.getInitialMapType | + | GoogleMapper.custom.getClickInfoHtml |
- | return | + | //Sample |
+ | var info = " | ||
+ | info += "< | ||
+ | return | ||
}; | }; | ||
/** | /** | ||
- | | + | |
*/ | */ | ||
- | GoogleMapper.custom.onUnavailable | + | GoogleMapper.custom.initCallback |
- | alert(" | + | |
- | }; | + | |
</ | </ | ||
javascript/google-mapper.1243952777.txt.gz · 最終更新: 2009/06/02 23:26 (外部編集)