/** * Map Icons created by Scott de Jonge * * @version 2.1 * @url http://map-icons.com * */ // Define Marker Shapes var MAP_PIN = 'M0-165c-27.618 0-50 21.966-50 49.054C-50-88.849 0 0 0 0s50-88.849 50-115.946C50-143.034 27.605-165 0-165z'; var SQUARE_PIN = 'M 50 -119.876 -50 -119.876 -50 -19.876 -13.232 -19.876 0.199 0 13.63 -19.876 50 -19.876 Z'; var SHEILD = 'M42.8-72.919c0.663-7.855 3.029-15.066 7.2-21.675L34.002-110c-5.054 4.189-10.81 6.509-17.332 6.919 c-5.976 0.52-11.642-0.574-16.971-3.287c-5.478 2.626-11.121 3.723-17.002 3.287c-6.086-0.523-11.577-2.602-16.495-6.281 l-16.041 15.398c3.945 6.704 6.143 13.72 6.574 21.045c0.205 3.373-0.795 8.016-3.038 14.018c-1.175 3.327-2.061 6.213-2.667 8.627 c-0.562 2.394-0.911 4.34-1.027 5.801c-0.082 6.396 1.78 12.168 5.602 17.302c2.986 3.745 7.911 7.886 14.748 12.41 c7.482 3.665 13.272 6.045 17.326 7.06c1.163 0.521 2.301 1.025 3.363 1.506C-7.9-5.708-6.766-5.232-5.586-4.713 C-3.034-3.242-1.243-1.646-0.301 0C0.858-1.782 2.69-3.338 5.122-4.713c1.717-0.723 3.173-1.346 4.341-1.896 c1.167-0.494 2.037-0.865 2.54-1.09c0.866-0.414 2.002-0.888 3.376-1.41c1.386-0.527 3.101-1.168 5.144-1.882 c3.951-1.348 6.83-2.62 8.655-3.77c6.634-4.524 11.48-8.595 14.566-12.235c3.958-5.152 5.879-10.953 5.79-17.475 c-0.232-2.922-1.52-7.594-3.85-13.959C43.463-64.631 42.479-69.445 42.8-72.919z'; var ROUTE = 'M49.986-58.919c-0.51-27.631-16.538-38.612-17.195-39.049l-2.479-1.692l-2.5 1.689c-4.147 2.817-8.449 4.247-12.783 4.247 c-7.178 0-12.051-3.864-12.256-4.032L-0.023-100l-2.776 2.248c-0.203 0.165-5.074 4.028-12.253 4.028 c-4.331 0-8.63-1.429-12.788-4.253l-2.486-1.678l-2.504 1.692c-1.702 1.17-16.624 12.192-17.165 38.907 C-50.211-56.731-43.792-12.754-0.003 0C47.609-13.912 50.23-56.018 49.986-58.919z'; var ROUNDED = 'M50-80c0-11-9-20-20-20h-60c-11 0-20 9-20 20v60c0 11 9 20 20 20h60c11 0 20-9 20-20V-80z'; // Function to do the inheritance properly // Inspired by: http://stackoverflow.com/questions/9812783/cannot-inherit-google-maps-map-v3-in-my-custom-class-javascript var inherits = function(childCtor, parentCtor) { /** @constructor */ function tempCtor() {}; tempCtor.prototype = parentCtor.prototype; childCtor.superClass_ = parentCtor.prototype; childCtor.prototype = new tempCtor(); childCtor.prototype.constructor = childCtor; }; function Marker(options){ google.maps.Marker.apply(this, arguments); if (options.custom_label) { this.MarkerLabel = new MarkerLabel({ map: this.map, marker: this, text: options.custom_label }); this.MarkerLabel.bindTo('position', this, 'position'); } } // Apply the inheritance inherits(Marker, google.maps.Marker); // Custom Marker SetMap Marker.prototype.setMap = function() { google.maps.Marker.prototype.setMap.apply(this, arguments); (this.MarkerLabel) && this.MarkerLabel.setMap.apply(this.MarkerLabel, arguments); }; // Marker Label Overlay var MarkerLabel = function(options) { var self = this; this.setValues(options); // Create the label container this.div = document.createElement('div'); this.div.className = 'marker-label'; var span = document.createElement('span'); span.className = "marker-icon"; this.div.appendChild(span); // Trigger the marker click handler if clicking on the label google.maps.event.addDomListener(this.div, 'click', function(e){ (e.stopPropagation) && e.stopPropagation(); google.maps.event.trigger(self.marker, 'click'); }); }; // Create MarkerLabel Object MarkerLabel.prototype = new google.maps.OverlayView; // Marker Label onAdd MarkerLabel.prototype.onAdd = function() { var pane = this.getPanes().overlayImage.appendChild(this.div); var self = this; this.listeners = [ google.maps.event.addListener(this, 'position_changed', function() { self.draw(); }), google.maps.event.addListener(this, 'text_changed', function() { self.draw(); }), google.maps.event.addListener(this, 'zindex_changed', function() { self.draw(); }) ]; }; // Marker Label onRemove MarkerLabel.prototype.onRemove = function() { this.div.parentNode.removeChild(this.div); for (var i = 0, I = this.listeners.length; i < I; ++i) { google.maps.event.removeListener(this.listeners[i]); } }; // Implement draw MarkerLabel.prototype.draw = function() { var projection = this.getProjection(); var position = projection.fromLatLngToDivPixel(this.get('position')); var div = this.div; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; div.style.display = 'block'; div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER this.div.innerHTML = this.get('text').toString(); };