JSFiddle - React, Tailwind, and code Playground
by ajai jothi
JavaScript
(function () {
'use strict';
function gmapFactory ($q) {
var _marker = null;
var geocoder = new google.maps.Geocoder();
function NavMarker (map) {
this.position = map.getCenter();
this.setMap(map);
this.map = map;
}
NavMarker.prototype = new google.maps.OverlayView();
NavMarker.prototype.draw = function () {
var self = this;
var overlay = this.overlay;
if (!overlay) {
overlay = this.overlay = document.createElement('div');
overlay.className = 'pulse';
google.maps.event.addDomListener(overlay, 'click', function () {
google.maps.event.trigger(self, 'click');
});
var panes = this.getPanes();
//insert overlay
panes.overlayImage.appendChild(overlay);
self.hidePulse();
}
var point = this.getProjection().fromLatLngToDivPixel(this.position);
if (point) {
overlay.style.left = (point.x) + 'px';
overlay.style.top = (point.y) + 'px';
}
};
NavMarker.prototype.removeOverlay = function () {
if (this.overlay) {
this.overlay.parentNode.removeChild(this.overlay);
this.overlay = null;
}
};
NavMarker.prototype.showPulse = function () {
if (this.overlay) {
this.overlay.style.display = 'block';
}
};
NavMarker.prototype.hidePulse = function () {
if (this.overlay) {
this.overlay.style.display = 'none';
}
};
NavMarker.prototype.create = function () {
var self = this;
this.marker = new google.maps.Marker({
icon: {
url: 'images/map-marker.svg',
anchor: new google.maps.Point(16, 16),
size: new google.maps.Size(32, 32)
},
position: this.map.getCenter(),
map: this.map,
draggable: true
});
this.marker.addListener('dragend', function (event) {
self.updateOverlayPosition(event);
...