mxn.googlev3.core.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. mxn.register('googlev3', {
  2. Mapstraction: {
  3. init: function(element, api){
  4. var me = this;
  5. if ( google && google.maps ){
  6. // by default no controls and road map
  7. var myOptions = {
  8. disableDefaultUI: true,
  9. mapTypeId: google.maps.MapTypeId.ROADMAP
  10. };
  11. var map = new google.maps.Map(element, myOptions);
  12. // deal with click
  13. google.maps.event.addListener(map, 'click', function(location){
  14. me.clickHandler(location.latLng.lat(),location.latLng.lng(),location,me);
  15. });
  16. // deal with zoom change
  17. google.maps.event.addListener(map, 'zoom_changed', function(){
  18. me.changeZoom.fire();
  19. });
  20. // deal with map movement
  21. google.maps.event.addListener(map, 'dragend', function(){
  22. me.moveendHandler(me);
  23. me.endPan.fire();
  24. });
  25. this.maps[api] = map;
  26. this.loaded[api] = true;
  27. me.load.fire();
  28. }
  29. else {
  30. alert(api + ' map script not imported');
  31. }
  32. },
  33. applyOptions: function(){
  34. var map = this.maps[this.api];
  35. var myOptions = [];
  36. if (this.options.enableDragging) {
  37. myOptions.draggable = true;
  38. }
  39. if (this.options.enableScrollWheelZoom){
  40. myOptions.scrollwheel = true;
  41. }
  42. map.setOptions(myOptions);
  43. },
  44. resizeTo: function(width, height){
  45. this.currentElement.style.width = width;
  46. this.currentElement.style.height = height;
  47. var map = this.maps[this.api];
  48. google.maps.event.trigger(map,'resize');
  49. },
  50. addControls: function( args ) {
  51. var map = this.maps[this.api];
  52. // remove old controls
  53. // Google has a combined zoom and pan control.
  54. if (args.zoom || args.pan) {
  55. if (args.zoom == 'large'){
  56. this.addLargeControls();
  57. } else {
  58. this.addSmallControls();
  59. }
  60. }
  61. if (args.scale){
  62. var myOptions = {
  63. scaleControl:true,
  64. scaleControlOptions: {style:google.maps.ScaleControlStyle.DEFAULT}
  65. };
  66. map.setOptions(myOptions);
  67. this.addControlsArgs.scale = true;
  68. }
  69. },
  70. addSmallControls: function() {
  71. var map = this.maps[this.api];
  72. var myOptions = {
  73. navigationControl: true,
  74. navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
  75. };
  76. map.setOptions(myOptions);
  77. this.addControlsArgs.pan = false;
  78. this.addControlsArgs.scale = false;
  79. this.addControlsArgs.zoom = 'small';
  80. },
  81. addLargeControls: function() {
  82. var map = this.maps[this.api];
  83. var myOptions = {
  84. navigationControl:true,
  85. navigationControlOptions: {style:google.maps.NavigationControlStyle.DEFAULT}
  86. };
  87. map.setOptions(myOptions);
  88. this.addControlsArgs.pan = true;
  89. this.addControlsArgs.zoom = 'large';
  90. },
  91. addMapTypeControls: function() {
  92. var map = this.maps[this.api];
  93. var myOptions = {
  94. mapTypeControl: true,
  95. mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT}
  96. };
  97. map.setOptions(myOptions);
  98. this.addControlsArgs.map_type = true;
  99. },
  100. setCenterAndZoom: function(point, zoom) {
  101. var map = this.maps[this.api];
  102. var pt = point.toProprietary(this.api);
  103. map.setCenter(pt);
  104. map.setZoom(zoom);
  105. },
  106. addMarker: function(marker, old) {
  107. return marker.toProprietary(this.api);
  108. },
  109. removeMarker: function(marker) {
  110. // doesn't really remove them, just hides them
  111. marker.hide();
  112. },
  113. removeAllMarkers: function() {
  114. var map = this.maps[this.api];
  115. // TODO: Add provider code
  116. },
  117. declutterMarkers: function(opts) {
  118. var map = this.maps[this.api];
  119. // TODO: Add provider code
  120. },
  121. addPolyline: function(polyline, old) {
  122. var map = this.maps[this.api];
  123. return polyline.toProprietary(this.api);
  124. },
  125. removePolyline: function(polyline) {
  126. var map = this.maps[this.api];
  127. // TODO: Add provider code
  128. },
  129. getCenter: function() {
  130. var map = this.maps[this.api];
  131. var pt = map.getCenter();
  132. return new mxn.LatLonPoint(pt.lat(),pt.lng());
  133. },
  134. setCenter: function(point, options) {
  135. var map = this.maps[this.api];
  136. var pt = point.toProprietary(this.api);
  137. if(options && options.pan) {
  138. map.panTo(pt);
  139. }
  140. else {
  141. map.setCenter(pt);
  142. }
  143. },
  144. setZoom: function(zoom) {
  145. var map = this.maps[this.api];
  146. map.setZoom(zoom);
  147. },
  148. getZoom: function() {
  149. var map = this.maps[this.api];
  150. return map.getZoom();
  151. },
  152. getZoomLevelForBoundingBox: function( bbox ) {
  153. var map = this.maps[this.api];
  154. var sw = bbox.getSouthWest().toProprietary(this.api);
  155. var ne = bbox.getNorthEast().toProprietary(this.api);
  156. var gLatLngBounds = new google.maps.LatLngBounds(sw, ne);
  157. map.fitBounds(gLatLngBounds);
  158. return map.getZoom();
  159. },
  160. setMapType: function(type) {
  161. var map = this.maps[this.api];
  162. switch(type) {
  163. case mxn.Mapstraction.ROAD:
  164. map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  165. break;
  166. case mxn.Mapstraction.SATELLITE:
  167. map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
  168. break;
  169. case mxn.Mapstraction.HYBRID:
  170. map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  171. break;
  172. default:
  173. map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  174. }
  175. },
  176. getMapType: function() {
  177. var map = this.maps[this.api];
  178. var type = map.getMapTypeId();
  179. switch(type) {
  180. case google.maps.MapTypeId.ROADMAP:
  181. return mxn.Mapstraction.ROAD;
  182. case google.maps.MapTypeId.SATELLITE:
  183. return mxn.Mapstraction.SATELLITE;
  184. case google.maps.MapTypeId.HYBRID:
  185. return mxn.Mapstraction.HYBRID;
  186. //case google.maps.MapTypeId.TERRAIN:
  187. // return something;
  188. default:
  189. return null;
  190. }
  191. },
  192. getBounds: function () {
  193. var map = this.maps[this.api];
  194. var gLatLngBounds = map.getBounds();
  195. var sw = gLatLngBounds.getSouthWest();
  196. var ne = gLatLngBounds.getNorthEast();
  197. return new mxn.BoundingBox(sw.lat(), sw.lng(), ne.lat(), ne.lng());
  198. },
  199. setBounds: function(bounds){
  200. var map = this.maps[this.api];
  201. var sw = bounds.getSouthWest().toProprietary(this.api);
  202. var ne = bounds.getNorthEast().toProprietary(this.api);
  203. var gLatLngBounds = new google.maps.LatLngBounds(sw, ne);
  204. map.fitBounds(gLatLngBounds);
  205. },
  206. addImageOverlay: function(id, src, opacity, west, south, east, north, oContext) {
  207. var map = this.maps[this.api];
  208. // TODO: Add provider code
  209. },
  210. setImagePosition: function(id, oContext) {
  211. var map = this.maps[this.api];
  212. var topLeftPoint; var bottomRightPoint;
  213. // TODO: Add provider code
  214. //oContext.pixels.top = ...;
  215. //oContext.pixels.left = ...;
  216. //oContext.pixels.bottom = ...;
  217. //oContext.pixels.right = ...;
  218. },
  219. addOverlay: function(url, autoCenterAndZoom) {
  220. var map = this.maps[this.api];
  221. // TODO: Add provider code
  222. },
  223. addTileLayer: function(tile_url, opacity, copyright_text, min_zoom, max_zoom, map_type) {
  224. var map = this.maps[this.api];
  225. // TODO: Add provider code
  226. },
  227. toggleTileLayer: function(tile_url) {
  228. var map = this.maps[this.api];
  229. // TODO: Add provider code
  230. },
  231. getPixelRatio: function() {
  232. var map = this.maps[this.api];
  233. // TODO: Add provider code
  234. },
  235. mousePosition: function(element) {
  236. var map = this.maps[this.api];
  237. // TODO: Add provider code
  238. }
  239. },
  240. LatLonPoint: {
  241. toProprietary: function() {
  242. return new google.maps.LatLng(this.lat, this.lon);
  243. },
  244. fromProprietary: function(googlePoint) {
  245. this.lat = googlePoint.lat();
  246. this.lon = googlePoint.lng();
  247. }
  248. },
  249. Marker: {
  250. toProprietary: function() {
  251. var options = {};
  252. // do we have an Anchor?
  253. var ax = 0; // anchor x
  254. var ay = 0; // anchor y
  255. if (this.iconAnchor) {
  256. ax = this.iconAnchor[0];
  257. ay = this.iconAnchor[1];
  258. }
  259. var gAnchorPoint = new google.maps.Point(ax,ay);
  260. if (this.iconUrl) {
  261. options.icon = new google.maps.MarkerImage(
  262. this.iconUrl,
  263. new google.maps.Size(this.iconSize[0],
  264. this.iconSize[1]),
  265. new google.maps.Point(0,0),
  266. gAnchorPoint
  267. );
  268. // do we have a Shadow?
  269. if (this.iconShadowUrl) {
  270. if (this.iconShadowSize) {
  271. var x = this.iconShadowSize[0];
  272. var y = this.iconShadowSize[1];
  273. options.shadow = new google.maps.MarkerImage(
  274. this.iconShadowUrl,
  275. new google.maps.Size(x,y),
  276. new google.maps.Point(0,0),
  277. gAnchorPoint
  278. );
  279. }
  280. else {
  281. options.shadow = new google.maps.MarkerImage(this.iconShadowUrl);
  282. }
  283. }
  284. }
  285. if (this.draggable){
  286. options.draggable = this.draggable;
  287. }
  288. if (this.labelText){
  289. options.title = this.labelText;
  290. }
  291. if (this.imageMap){
  292. options.shape = {
  293. coord: this.imageMap,
  294. type: 'poly'
  295. };
  296. }
  297. options.position = this.location.toProprietary(this.api);
  298. options.map = this.map;
  299. var marker = new google.maps.Marker(options);
  300. if (this.infoBubble){
  301. var infowindow = new google.maps.InfoWindow({
  302. content: this.infoBubble
  303. });
  304. var event_action = "click";
  305. if (this.hover) {
  306. event_action = "mouseover";
  307. }
  308. google.maps.event.addListener(marker, event_action, function() { infowindow.open(this.map,marker); });
  309. }
  310. if (this.hoverIconUrl){
  311. var gSize = new google.maps.Size(this.iconSize[0],
  312. this.iconSize[1]);
  313. var zerozero = new google.maps.Point(0,0);
  314. var hIcon = new google.maps.MarkerImage(
  315. this.hoverIconUrl,
  316. gSize,
  317. zerozero,
  318. gAnchorPoint
  319. );
  320. var Icon = new google.maps.MarkerImage(
  321. this.iconUrl,
  322. gSize,
  323. zerozero,
  324. gAnchorPoint
  325. );
  326. google.maps.event.addListener(
  327. marker,
  328. "mouseover",
  329. function(){
  330. marker.setIcon(hIcon);
  331. }
  332. );
  333. google.maps.event.addListener(
  334. marker,
  335. "mouseout",
  336. function(){ marker.setIcon(Icon); }
  337. );
  338. }
  339. google.maps.event.addListener(marker, 'click', function() {
  340. marker.mapstraction_marker.click.fire();
  341. });
  342. return marker;
  343. },
  344. openBubble: function() {
  345. var infowindow = new google.maps.InfoWindow({
  346. content: this.infoBubble
  347. });
  348. infowindow.open(this.map,this.proprietary_marker);
  349. },
  350. hide: function() {
  351. this.proprietary_marker.setOptions({visible:false});
  352. },
  353. show: function() {
  354. this.proprietary_marker.setOptions({visible:true});
  355. },
  356. update: function() {
  357. // TODO: Add provider code
  358. }
  359. },
  360. Polyline: {
  361. toProprietary: function() {
  362. throw 'Not implemented';
  363. },
  364. show: function() {
  365. throw 'Not implemented';
  366. },
  367. hide: function() {
  368. throw 'Not implemented';
  369. }
  370. }
  371. });