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 ?
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:
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.
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 avatarwith 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 ):
Hello i try all this answers but no one work as i wanna Try this first Create a div contains 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;
}
The full Tutorial is her
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
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.