Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save gopeter/c9c8ff915ea04e169982af71a42e2c22 to your computer and use it in GitHub Desktop.
Save gopeter/c9c8ff915ea04e169982af71a42e2c22 to your computer and use it in GitHub Desktop.
Custom markers (div-element) on google maps
Usage:
var myLatLng = new google.maps.LatLng(point.lat, point.lng);
var myMarker = new CustomMarker(myLatLng,map);
Implementation (mostly from googles example):
function CustomMarker(latlng, map) {
this.latlng_ = latlng;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.style.border = "none";
div.style.position = "absolute";
div.style.paddingLeft = "0px";
div.style.cursor = 'pointer';
//you could/should do most of the above via styling the class added below
div.classList.add('myAwesomeMarker');
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(me, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment