Skip to content

Instantly share code, notes, and snippets.

@filipbech
Last active December 19, 2017 13:11
Show Gist options
  • Save filipbech/8331336 to your computer and use it in GitHub Desktop.
Save filipbech/8331336 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_;
};
@mathirajesh
Copy link

marker_clear

@mathirajesh
Copy link

iam having an button in my html page with id="clearMarkers" now i want to remove all the markers while click the button, but iam not done with this one, can you please help me to sort it out..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment