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

When you know the url of the image used for the marker you know how to access it via CSS: use a attribute-selector.

Let's create a circle-marker based on your avatar with a 1px black border:

Marker-setup:

icon:{
       url: 'https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1',
       //the size of the image is 32x32, 
       //when you want to add a border you must add 2*borderWidth to the size
       size:new google.maps.Size(34,34)},
       //define the shape
       shape:{coords:[17,17,18],type:'circle'},
       //set optimized to false otherwise the marker  will be rendered via canvas 
       //and is not accessible via CSS
       optimized:false
     }

the CSS:

  img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1"]{
    border-radius:16px;
    border:1px solid #000 !important;
  }

....done.

Demo: http://jsfiddle.net/doktormolle/5raf237u/

When you use a shadow use a larger size(depending on the size of the shadow ):

http://jsfiddle.net/doktormolle/L2o2xwj3/