<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="map_div" style="height: 400px;"></div>
<div id="help">
<button data-my-action='123'>
WHAT
</button>
</div>
<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=drawing,geometry"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
/**
* Class declaration for the Google maps overlay view
* which has to stay separate from ember since Google
* implements the same method signatures.
*/
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
window.Tag = (function (_google$maps$OverlayView) {
_inherits(Tag, _google$maps$OverlayView);
/**
* Creates the class level variables and sets
* up the options object into the class.
*/
function Tag(opts) {
_classCallCheck(this, Tag);
_get(Object.getPrototypeOf(Tag.prototype), 'constructor', this).call(this, opts);
// Setup the properties
this._ready = false;
// Wrapper for the content presented by this container
this._tagWrapper = null;
// Holds the last zoom level used for the draw method
this._zoomLevel = null;
// Set the default size
this.setOffset(opts.offset || new google.maps.Size(0, 0));
}
/**
* Interface implementation.
* Adds the content to the DOM of the map
*/
_createClass(Tag, [{
key: 'onAdd',
value: function onAdd() {
// Create the wrapper
if (!this._tagWrapper) {
this._tagWrapper = document.createElement('div');
this._tagWrapper.classList.add('tag');
this._tagWrapper.style['position'] = 'absolute';
if (this.get('content')) {
this._tagWrapper.appendChild(this.get('content'));
}
}
// Insert the wrapper on the map
var panes = this.getPanes();
if (panes) {
panes.overlayMouseTarget.appendChild(this._tagWrapper);
}
// Mark the overlay as ready / completed initialization
this._ready = true;
}
/**
* Interface implementation.
*/
}, {
key: 'draw',
value: function draw(force) {
var map = this.getMap();
var zoom = map.getZoom();
var position = this.get('position');
// Only run this if we are forced to because of a position change, or change in zoom
if (position && (force || !this._zoomLevel || this._zoomLevel !== zoom)) {
this._zoomLevel = zoom;
// Determine where the tag would like to go.
var projection = this.getProjection();
var basePosition = projection.fromLatLngToDivPixel(position);
var uOffset = this.getOffset();
// Move the tag to its initial position
var x = basePosition.x + uOffset.width;
var y = basePosition.y + uOffset.height;
this._tagWrapper.style.top = y + 'px';
this._tagWrapper.style.left = x + 'px';
}
}
/**
* Interface implementation.
*
* This removes the object from the map
*/
}, {
key: 'onRemove',
value: function onRemove() {
if (this._tagWrapper && this._tagWrapper.parentNode) {
this._tagWrapper.parentNode.removeChild(this._tagWrapper);
this._tagWrapper = null;
}
this.set('content', null);
}
/**
* Gets the content from the MVCObject
*/
}, {
key: 'setContent',
value: function setContent(content) {
this.set('content', content);
}
/**
* Sets the content from the MVCObject
*/
}, {
key: 'getContent',
value: function getContent() {
return this.get('content');
}
/**
* This is an action that is fired when
* the content is changed with setContent
*/
}, {
key: 'content_changed',
value: function content_changed() {
if (this._tagWrapper) {
// Remove the existing content
this._tagWrapper.removeChild(this._tagWrapper.firstChild);
// Set the new content
this._tagWrapper.appendChild(this.getContent());
// Trigger draw if this is ready to be displayed
if (this._ready) {
this.draw(true);
}
}
}
/**
* Sets the position
*/
}, {
key: 'setPosition',
value: function setPosition(object) {
this.set('position', object);
}
/**
* Gets the marker that this tag is associated with
* This is basically the asset
*/
}, {
key: 'getPosition',
value: function getPosition() {
return this.get('position');
}
/**
* Anytime the anchor object changes
*/
}, {
key: 'position_changed',
value: function position_changed() {
// re--draw if necessary
if (this._ready) {
this.draw();
}
}
/**
* Get
*/
}, {
key: 'getOffset',
value: function getOffset() {
return this.get('offset');
}
/**
* set
*/
}, {
key: 'setOffset',
value: function setOffset(value) {
this.set('offset', value);
}
/**
* Forces a redraw on change
*/
}, {
key: 'offset_changed',
value: function offset_changed() {
if (this._ready) {
this.draw(true);
}
}
}]);
return Tag;
})(google.maps.OverlayView);
</script>
<script>
/*
* declare map as a global variable
*/
var map;
$(function(){
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
/*
* marker creater function
*/
function createMarker() {
var tag = new Tag({
offset: new google.maps.Size(20,-20)
});
tag.setPosition(new google.maps.LatLng(33.818038, -117.928492));
tag.setContent($('#help')[0]);
tag.setMap(map);
return tag;
}
/*
* add markers to map
*/
var marker1 = createMarker();
/**
* add the click handler
*/
$('body').on('click', function(){
alert('clicked');
});
$('body').on('click', '[data-my-action]', function(){
alert('clicked With Filter');
});
});
</script>
</body>
</html>