var centerLat = 51; var centerLon = -122; var startZoom = 6; var map; function init() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map"), {mapTypes:[G_PHYSICAL_MAP,G_SATELLITE_MAP,G_NORMAL_MAP]}); // Controls map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); //map.addControl(new GOverviewMapControl()); // Setings map.setCenter(new GLatLng(centerLat,centerLon), startZoom); map.setMapType(G_PHYSICAL_MAP); // Restrict the zoom range. /* var mt = map.getMapTypes(); for (var i=0; i element as an overlay - used to replace GMarker for fast drawing. // // Options (optional): // opts.title - title (displayed as ddrivetip if found, otherwise a regular tooltip) // opts.mouseoverIcon - sets a icon to show on mouseover function IconOverlay(point, icon, opts) { this.point = point; this.icon = icon; // this.icon just remembers the original setting this.opts = opts; // Icon is used to get image URL and anchor this.image = icon.image; this.anchor = icon.iconAnchor; this.hidden = false; // Parse options opts = opts || {}; if (opts.title) { this.title = opts.title; this._setTooltip(opts.title); } if (opts.mouseoverIcon) { this.mouseoverIcon = opts.mouseoverIcon; } if (opts.path) { this.path = opts.path; } } IconOverlay.prototype = new GOverlay(); // Initialization IconOverlay.prototype._setTooltip = function(title) { // Link mouseover/out events if using ddrivetip if (window.ddrivetip && window.hideddrivetip) { GEvent.addListener(this, "mouseover", function() {ddrivetip(title);} ); GEvent.addListener(this, "mouseout", hideddrivetip ); } else { // Otherwise set tooltip to be used this.tooltip = title; } } IconOverlay.prototype.initialize = function(map) { var img; // Detect IE var arVersion, version; arVersion = navigator.appVersion.split("MSIE"); if (arVersion.length > 1) version = parseFloat(arVersion[1]); // A workaround for IE6 inability to display transparent png if (version && version >= 5.5 && version < 7.0 && document.body.filters && this.image.toUpperCase().substring(this.image.length-3, this.image.length) == "PNG") { img = document.createElement('span'); img.style.cssText = "display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.image + "');"; } else { // Just a normal image for normal browsers img = document.createElement("img"); img.src = this.image; } img.style.width = this.icon.iconSize.width + 'px'; img.style.height = this.icon.iconSize.height + 'px'; img.style.position = "absolute"; img.style.zIndex = Math.round(this.point.lat()*-100000) if (this.tooltip) img.title = this.tooltip; try { img.style.cursor='pointer'; } catch(e) { } // Register DOM event handlers GEvent.bindDom(img, 'click', this, this._onClick); GEvent.bindDom(img, 'mouseover', this, this._onMouseOver); GEvent.bindDom(img, 'mouseout', this, this._onMouseOut); map.getPane(G_MAP_MARKER_PANE).appendChild(img); this.map_ = map; this.img_ = img; } // Action IconOverlay.prototype.remove = function() { this.img_.parentNode.removeChild(this.img_); GEvent.clearInstanceListeners(this.img_); } IconOverlay.prototype.copy = function() { return new IconOverlay(this.point, this.icon, this.opts); } IconOverlay.prototype.redraw = function(force) { if (!force) return; var p = this.map_.fromLatLngToDivPixel(this.point); this.img_.style.left = (p.x - this.anchor.x) + "px"; this.img_.style.top = (p.y - this.anchor.y) + "px"; } IconOverlay.prototype.show = function() { this.img_.style.display=""; this.hidden = false; } IconOverlay.prototype.hide = function() { this.img_.style.display="none"; this.hidden = true; } IconOverlay.prototype.isHidden = function() { return this.hidden; } // Set a new icon IconOverlay.prototype.setIcon = function(icon) { this.image = icon.image; this.anchor = icon.iconAnchor; this.img_.src = this.image; this.redraw(true); } IconOverlay.prototype.setPoint = function(point) { this.point = point; this.redraw(true); } IconOverlay.prototype.getPoint = function() { return this.point; } // Event handlers - just raise object events to whoever cares. Pass itself as a first argument IconOverlay.prototype._onClick = function(e) { GEvent.trigger(this, 'click', this); } IconOverlay.prototype._onMouseOver = function() { this.map_.onCustomMarker = this; // This can be used during map-click event to check whether the click is actually on the marker (since the marker-click event happens later) if (this.mouseoverIcon) this.setIcon(this.mouseoverIcon); GEvent.trigger(this, 'mouseover', this); } IconOverlay.prototype._onMouseOut = function() { if (this.mouseoverIcon) this.setIcon(this.icon); GEvent.trigger(this, 'mouseout', this); this.map_.onCustomMarker = null; } window.onload = init;