Custom Google map marker with rounded corner css

Question

I managed to use and apply my own marker on the Google map, as shown below.

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

I would like to add a round corner of the background to it as 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 to do it for google map?

Answer 1

Starting with version 3.17, google.maps.Marker objects exist in the markerLayer , which is just a fancy name for a div.

To get a reference to markerLayer, you need to create an OverlayView object. Now this object is a bit abstract. You need to implement the drawing function for it to work. For example, open a basic example in a new tab and paste it into 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 containing markers. If I create your marker using this icon image,

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

My marker layer will be:

If the selected div (the one with z-index 103) is a marker layer.

If you want to access markerLayer software programmatically, you can add the markerLayer class to it after you get the link using the getPanes method. I assume that each image inside the marker layer is a marker, so you can style it as you wish.

TL / DR : you can style it if you are faced with the whole problem of finding a DOM link to your marker.

Edit: I made bl.ocks to check

Answer 2

When you know the URL of the image used for the marker, you know how to access it through CSS: use the attribute selector.

Create a circle marker based on your avatar with black frame 1px:

Marker setting:

 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 } 

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

.... did.

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

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

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

Answer 3

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 relevant document is here: customoverlays

Answer 4

Hi, I am trying all the answers, but no one is working as I want to Try it first Create a div containing the image (MarkerImage) and add CSS

  var map; function initialize() { var mapOptions = { zoom: 9, center: new google.maps.LatLng(40.6, -74) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon var myIcon='http://ruralshores.com/assets/marker-icon.png'; var marker1 = new google.maps.Marker({ position: {lat:40.8, lng:-74}, map: map, icon: myIcon, optimized:false }); var marker2 = new google.maps.Marker({ position: {lat:40.6, lng:-74.5}, map: map, icon: myIcon , optimized:false }); var marker3 = new google.maps.Marker({ position: {lat:40.5, lng:-74.3}, map: map, icon: myIcon , optimized:false }); // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV var myoverlay = new google.maps.OverlayView(); myoverlay.draw = function () { this.getPanes().markerLayer.id='markerLayer'; }; myoverlay.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); 

and now add somme CSS

 #markerLayer img { border: 2px solid red !important; width: 85% !important; height: 90% !important; border-radius: 5px; } 

Full tutorial

Answer 5

Try this DEMO written in SCSS ( Sass )

 $radius: 10px; $thickness: 5px; $border-color: rgba(black, 0.15); $background-color: white; .wrapper { position: relative; width: 400px; height: 200px; overflow: hidden; margin: 50px; & > i { display: block; position: absolute; &.top { top: 0; border-top: $thickness solid $border-color; &:after { top: -$radius/2 - $thickness; border-top: $radius/2 solid $background-color; } } &.right { right: 0; border-right: $thickness solid $border-color; &:after { right: -$radius/2 - $thickness; border-right: $radius/2 solid $background-color; } } &.bottom { bottom: 0; border-bottom: $thickness solid $border-color; &:after { bottom: -$radius/2 - $thickness; border-bottom: $radius/2 solid $background-color; } } &.left { left: 0; border-left: $thickness solid $border-color; &:after { left: -$radius/2 - $thickness; border-left: $radius/2 solid $background-color; } } &.top:not(.right):not(.left), &.bottom:not(.right):not(.left) { height: $thickness; left: $radius+$thickness; right: $radius+$thickness; } &.left:not(.top):not(.bottom), &.right:not(.top):not(.bottom) { width: $thickness; top: $radius+$thickness; bottom: $radius+$thickness; } &.top.right, &.top.left, &.bottom.right, &.bottom.left { width: $radius; height: $radius; &:after { content:""; position: absolute; width: 1.5*$radius; height: 1.5*$radius; } } &.top.right { border-top-right-radius: $radius; &:after { border-top-right-radius: 1.5*$radius; } } &.top.left { border-top-left-radius: $radius; &:after { border-top-left-radius: 1.5*$radius; } } &.bottom.right { border-bottom-right-radius: $radius; &:after { border-bottom-right-radius: 1.5*$radius; } } &.bottom.left { border-bottom-left-radius: $radius; &:after { border-bottom-left-radius: 1.5*$radius; } } } } #map { width: inherit; height: inherit; .gmnoprint { display: none; } }