Skip to content

Commit

Permalink
new events system
Browse files Browse the repository at this point in the history
  • Loading branch information
@SPAHI4
SPAHI4 committed Jan 24, 2017
1 parent 5e43ba4 commit 4f862cc
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 63 deletions.
59 changes: 51 additions & 8 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,29 +40,72 @@
width: 1200px;
height: 700px;
}

.div {
background: red;
}

.marker {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="vertical-section-container">
<h3>Basic google-map-custom-maker demo</h3>
<demo-snippet>
<div style="background: black; width: 150px;">
</div>
<template is="dom-bind" id="tpl">
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers
api-key="AIzaSyDtwbkcg7mLu-h4J_UydSkF2KtrBtdGuTk">
<template is="dom-repeat" items="{{markers}}">
<google-map-custom-overlay latitude="{{item.lat}}" longitude="{{item.lng}}" position="left">
<div class="mymarker">Custom Marker {{index}}</div>
<google-map-custom-overlay click-events latitude="{{item.lat}}" longitude="{{item.lng}}"
position="left" on-google-map-overlay-click="_onCLick">
<div class="marker">
<svg class="h3h" viewBox="0 0 70 100">
<defs>
<path id="marker12" fill-rule="evenodd"
d="M55.314553,14.7746668 C50.1278586,9.40007989 42.9241164,6.20437956 35,6.20437956 C27.0758836,6.20437956 19.8721414,9.40007989 14.685447,14.7746668 C9.4987526,20.1492537 6.18503119,27.2669499 6.18503119,35.2562008 C6.18503119,48.4747794 21.7451143,76.800305 30.1014553,90.8904383 C31.1099792,92.6335476 32.9829522,93.7956204 35,93.7956204 C37.0170478,93.7956204 38.8900208,92.7788067 39.8985447,90.8904383 C48.2548857,76.9455641 63.8149688,48.4747794 63.8149688,35.2562008 C63.8149688,27.2669499 60.6453222,20.0039946 55.314553,14.7746668 Z M70,35.2562008 C70,42.4737919 66.5942972,52.6435655 60.5861738,65.4439216 C56.2095414,74.768373 50.643657,84.9943895 45.264574,93.9783775 C43.1654827,97.7717745 39.2603357,100 35,100 C30.7809438,100 26.8884791,97.6699004 24.7718563,94.0388445 C19.2249726,84.6844942 13.7625927,74.6385335 9.41558364,65.3931905 C3.39819924,52.5952455 0,42.4721427 0,35.2562008 C0,25.9190207 3.7288895,17.2078912 10.2415755,10.4592775 C16.6851366,3.78229279 25.5311641,0 35,0 C44.4399672,0 53.2609177,3.75926488 59.6994217,10.3982874 C66.2784473,16.8839283 70,25.7605548 70,35.2562008 Z"></path>
<path id="coverClipPath"
d="M70,35.2562008 C70,42.4737919 66.5942972,52.6435655 60.5861738,65.4439216 C56.2095414,74.768373 50.643657,84.9943895 45.264574,93.9783775 C43.1654827,97.7717745 39.2603357,100 35,100 C30.7809438,100 26.8884791,97.6699004 24.7718563,94.0388445 C19.2249726,84.6844942 13.7625927,74.6385335 9.41558364,65.3931905 C3.39819924,52.5952455 0,42.4721427 0,35.2562008 C0,25.9190207 3.7288895,17.2078912 10.2415755,10.4592775 C16.6851366,3.78229279 25.5311641,0 35,0 C44.4399672,0 53.2609177,3.75926488 59.6994217,10.3982874 C66.2784473,16.8839283 70,25.7605548 70,35.2562008 Z"
transform="translate(35, 50) scale(.9) translate(-35, -50)"></path>
<clipPath id="coverClip">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#coverClipPath"></use>
</clipPath>
</defs>
<image clip-path="url(#coverClip)" width="70" height="100"
preserveAspectRatio="xMidYMid slice" xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="https://mw2.google.com/mw-panoramio/photos/medium/12191855.jpg"></image>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#marker12"
fill="white"></use>
</svg>

</div>
</google-map-custom-overlay>
<google-map-marker click-events latitude="{{item.lat}}" longitude="{{item.lng}}"
on-google-map-marker-click="_onMarkerCLick">TEST
</google-map-marker>
</template>
</google-map>
<script>

var t = document.querySelector('#tpl');
var markers = [{ lat: "37.777", lng: "-122.38423" }, { lat: "37.777", lng: "-122.38123" }];
t.markers = markers;
t._onCLick = function (e, m) {
console.log('overlay', e, m);

}
t._onMarkerCLick = function (e, m) {
console.log('marker', e, m);

}
</script>
</template>
</demo-snippet>
</div>
<script>

var t = document.querySelector('#tpl');
var markers = [{ lat: "37.777", lng: "-122.38423" }, { lat: "37.777", lng: "-122.38123" }];
t.markers = markers;
</script>
</body>
</html>
68 changes: 13 additions & 55 deletions google-map-custom-overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,7 @@
*/
clickEvents: {
type: Boolean,
value: false,
observer: '_clickEventsChanged'
},

/**
* When true, marker mouse* events are automatically registered.
*/
mouseEvents: {
type: Boolean,
value: false,
observer: '_mouseEventsChanged'
value: false
},

/**
Expand Down Expand Up @@ -115,12 +105,14 @@
},

observers: [
'_updatePosition(latitude, longitude)'
'_updatePosition(latitude, longitude)',
'_clickEventsChanged(clickEvents, overlay.div)'
],

_clearOverlay: function () {
google.maps.event.clearInstanceListeners(this.overlay);
this._listeners = {};
this._domListeners = {};
this.overlay.setMap(null);
},

Expand All @@ -146,7 +138,7 @@
},

_clickEventsChanged: function () {
if (this.map) {
if (this.map && this.overlay.div) {
if (this.clickEvents) {
this._forwardEvent('click');
this._forwardEvent('dblclick');
Expand All @@ -159,38 +151,6 @@
}
},

_dragEventsChanged: function () {
if (this.map) {
if (this.dragEvents) {
this._forwardEvent('drag');
this._forwardEvent('dragend');
this._forwardEvent('dragstart');
} else {
this._clearListener('drag');
this._clearListener('dragend');
this._clearListener('dragstart');
}
}
},

_mouseEventsChanged: function () {
if (this.map) {
if (this.mouseEvents) {
this._forwardEvent('mousedown');
this._forwardEvent('mousemove');
this._forwardEvent('mouseout');
this._forwardEvent('mouseover');
this._forwardEvent('mouseup');
} else {
this._clearListener('mousedown');
this._clearListener('mousemove');
this._clearListener('mouseout');
this._clearListener('mouseover');
this._clearListener('mouseup');
}
}
},

_mapChanged: function () {
// Marker will be rebuilt, so disconnect existing one from old map and listeners.
if (this.overlay) {
Expand All @@ -205,10 +165,9 @@

_mapReady: function () {
this._listeners = {};
this._domListeners = {};
this._setupOverlay();
this._clickEventsChanged();
this._dragEventsChanged();
this._mouseEventsChanged();
},

_setupOverlay: function () {
Expand All @@ -230,9 +189,7 @@
CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function () {

var self = this;

var div = this.div;

if (!div) {
Expand All @@ -242,15 +199,11 @@
div.dataset.marker_id = self.args.marker_id;
}

google.maps.event.addDomListener(div, "click", function (event) {
elem.fire('click', event);
google.maps.event.trigger(self, "click");
});

var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}

elem.notifyPath('overlay.div');
}

var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

Expand Down Expand Up @@ -305,7 +258,12 @@
},

_forwardEvent: function (name) {
this._domListeners[name] = google.maps.event.addDomListener(this.overlay.div, name, function (event) {
event.stopPropagation();
google.maps.event.trigger(this.overlay, 'click', event);
}.bind(this));
this._listeners[name] = google.maps.event.addListener(this.overlay, name, function (event) {
event.stopPropagation();
this.fire('google-map-overlay-' + name, event);
}.bind(this));
},
Expand Down

0 comments on commit 4f862cc

Please sign in to comment.