user3953386 user3953386 - 21 days ago 9
CSS Question

Google map custom marker with css rounded corner

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

var marker = new google.maps.Marker({
position: point,
map: map,
icon: pIcon,
optimized:false
});


I would like to add a round corner background to it like below css

#orangeIcon {
width: 50px;
height: 50px;

overflow: hidden;
border-top-left-radius:5px 5px;
border-top-right-radius:5px 5px;
border-bottom-left-radius:5px 5px;
border-bottom-right-radius:5px 5px;
-moz-box-shadow: 0 1px 3px #FFBF00;
-webkit-box-shadow: 0 1px 3px #FFBF00;

background-color: #FFBF00;
position: relative;
border: 5px solid #FFBF00;


}


how achieve this for google map ?

Answer

As of version 3.17, the google.maps.Marker objects exists in the markerLayer pane which is just a fancy name for a div.

To get a reference to the markerLayer you need to create an OverlayView Object. Now, this object is a bit abstract. You need to implement a draw function for it to work. For example, open the basic example in a new tab and paste this to the console

var overlay = new google.maps.OverlayView();
overlay.draw=function() {};

overlay.setMap(map);

overlay.getPanes();

it returns:

{
    floatPane: div
    floatShadow: div
    mapPane: div
    markerLayer: div
    overlayImage: div
    overlayLayer: div
    overlayMouseTarget: div
    overlayShadow: div
}

Thay markerLayer is a div which contains the markers. If I create your marker using a given icon image,

var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,                          
                icon: 'http://ruralshores.com/assets/marker-icon.png',
                optimized:false
             });

My markerLayer will be:

enter image description here

Where the selected div (the one with z-index 103) is the markerLayer.

If you wanted to access the markerLayer programatically, you could add a "markerLayer" class to it after getting its reference with the getPanes method. I guess that every image inside the markerLayer is a marker, so you could style it at will.

TL/DR : you can style it, provided you went through all the trouble of finding the DOM reference to your marker.

Edit: I made a bl.ocks for you to check

Comments