Today I was writing some google map javascripts and had to implement the icons via OverlayView class, so I think I might share it in case anyone need some sample code.
//"gmap" is an instance of the google map
//creating the class to exntend the google map OverlayView class
function MapLocationIcon(id,lat,lng,title,icon_class){
this.lat = lat;
this.lng = lng;
this.title = title; //eg. A,B,C.D
this.icon_class= icon_class; //the position of the spritesheet for the icon background
this.pos = new google.maps.LatLng(lat,lng);
}
//make a copy of the OverlayView to extend it
MapLocationIcon.prototype = new google.maps.OverlayView();
MapLocationIcon.prototype.onRemove= function(){}
//prepare the overlay with DOM
MapLocationIcon.prototype.onAdd= function(){
div = document.createElement('DIV');
$(div).addClass('map_icon').addClass(this.icon_class);
$(div).text(this.title);
$(div).click(function(){
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
//set position
MapLocationIcon.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';
}
//to use it
var icon = new MapLocationIcon('id', -34.123,78.999, 'A', 'gold');
icon.setMap(gmap);
Thank you , very usefull
Why the -30 for position.y on line 33?
I believe it was a offset to line up stuff, I can’t remember exactly now since it’s 5 years ago.