Google Map Custom Marker With Css Rounded Corner
Solution 1:
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:divfloatShadow:divmapPane:divmarkerLayer:divoverlayImage:divoverlayLayer:divoverlayMouseTarget:divoverlayShadow: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.
Solution 2:
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 ):
Solution 3:
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;
functioninitialize() {
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 iconvar 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 DIVvar 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
#markerLayerimg {
border: 2px solid red !important;
width: 85%!important;
height: 90%!important;
border-radius: 5px;
}
The full Tutorial is her
Solution 4:
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(){returnthis.latlng;}
and the related document is here: customoverlays
Solution 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;
}
}
Post a Comment for "Google Map Custom Marker With Css Rounded Corner"