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.