plugins/Mapstraction/js/mxn.googlev3.core.js

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