Google Map v3 OverlayView Code Sample

By | May 24, 2012

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);

3 thoughts on “Google Map v3 OverlayView Code Sample

    1. James Lin Post author

      I believe it was a offset to line up stuff, I can’t remember exactly now since it’s 5 years ago.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.