I'm using goole maps overlay to add HTML as markers but i don't know how to use HTMLMarker.prototype.onRemove method to remove all markers added.
Following this code http://jsfiddle.net/BCr2B/
var overlay;
function initialize() {
var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
var mapOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
function HTMLMarker(lat,lng){
this.lat = lat;
this.lng = lng;
this.pos = new google.maps.LatLng(lat,lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove= function(){}
//init your html element here
HTMLMarker.prototype.onAdd= function(){
div = document.createElement('DIV');
div.className = "htmlMarker";
div.innerHTML = "<i>HTML Marker</i>";
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
HTMLMarker.prototype.draw = function(){
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
panes.overlayImage.style.left = position.x + 'px';
panes.overlayImage.style.top = position.y - 30 + 'px';
}
var htmlMarker = new HTMLMarker(62.323907, -150.109291);
htmlMarker.setMap(gmap);
}
can anybody help me?
See Question&Answers more detail:os