Google map custom marker with css rounded corner

Question

I have managed to use and apply my own marker on google map as below.

var marker = new google.maps.Marker({
                            position: point,
             


        

Answer 1

as mentioned above ,I used OverlayView

var AvatarMarker = function(latlng,avatarUrl,map,id){
      this.latlng = latlng;
      this.avatarUrl = avatarUrl;
      this.setMap(map);
      this.id= id;
    };
  AvatarMarker.prototype = new google.maps.OverlayView();
  AvatarMarker.prototype.onAdd= function(){
    var img = document.createElement("img"),me=this;
    img.style.width="30px";
    img.style.height="30px";
    img.style.position="absolute";
    img.style.webkitBorderRadius="50%";
    img.style.borderRadius="50%";
    img.style.zIndex="999";
    img.src=me.avatarUrl;
    this.getPanes().overlayMouseTarget.appendChild(img);
    me.img= img;
    img.onclick = function(){
      google.maps.event.trigger(me,"click",{id:me.id});
    }
  };
  AvatarMarker.prototype.draw = function(){
    this.setLatLng(this.latlng);
  }
  AvatarMarker.prototype.onRemove = function(){
    this.img.parentNode.removeChild(this.img);
    this.img =  null;
  }
  AvatarMarker.prototype.setLatLng = function(latlng){
    if(!this.getProjection()) return ;
    var overlayProjection = this.getProjection(),
      xy=overlayProjection.fromLatLngToDivPixel(latlng);
    this.img && (this.img.style.left=(xy.x-15)+'px');
    this.img && (this.img.style.top=(xy.y-15)+'px');
    google.maps.event.trigger(this,"draw");
  }
  AvatarMarker.prototype.getLatLng = function(){return this.latlng;}

and the related document is here: customoverlays