How add circle Shape in Google maps custom icon? - google-maps

Question

I have problem with custom images on map.
For example:
My icons generated this way, and icon contains image:
var ic = { //icon
url: icon, // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0), // anchor
//define the shape
//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,
title: 'spot'
};
var marker = new google.maps.Marker({
map: map, title: name , position: latlngset, icon: ic
});
I want make my icons like css 50% radius (circle shape).
How I can do it?

Answer 1

Related question: JS Maps v3: custom marker with user profile picture
Using code from there, and changing the border-radius to 50%, gives me a circular icon with the image in the circle.
proof of concept fiddle
//adapted from http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
function CustomMarker(latlng, map, imageSrc) {
this.latlng_ = latlng;
this.imageSrc = imageSrc;
// Once the LatLng and text are set, add the overlay to the map. This will
// trigger a call to panes_changed which should in turn call draw.
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
// Check if the div has been created.
var div = this.div_;
if (!div) {
// Create a overlay text DIV
div = this.div_ = document.createElement('div');
// Create the DIV representing our CustomMarker
div.className = "customMarker"
var img = document.createElement("img");
img.src = this.imageSrc;
div.appendChild(img);
var me = this;
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(me, "click");
});
// Then add the overlay to the DOM
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
// Position the overlay
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.remove = function() {
// Check if the overlay was on the map and needs to be removed.
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 17,
center: new google.maps.LatLng(37.77088429547992, -122.4135623872337),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var data = [{
profileImage: "http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&d=identicon&r=PG",
pos: [37.77085, -122.41356],
}, {
profileImage: "http://placekitten.com/90/90",
pos: [37.77220, -122.41555],
}]
for (var i = 0; i < data.length; i++) {
new CustomMarker(new google.maps.LatLng(data[i].pos[0], data[i].pos[1]), map, data[i].profileImage)
}
.customMarker {
position: absolute;
cursor: pointer;
background: #424242;
width: 100px;
height: 100px;
/* -width/2 */
margin-left: -50px;
/* -height + arrow */
margin-top: -110px;
border-radius: 50%;
padding: 0px;
}
.customMarker:after {
content: "";
position: absolute;
bottom: -10px;
left: 40px;
border-width: 10px 10px 0;
border-style: solid;
border-color: #424242 transparent;
display: block;
width: 0;
}
.customMarker img {
width: 90px;
height: 90px;
margin: 5px;
border-radius: 50%;
}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 640pxpx; height: 480px;">map div</div>

Answer 2

After some google, I found this simple and easiest way for making a marker circle shape. Anyone can also customize it easily.
Here is a sample code -
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: { lat: 23.8178689, lng: 90.4213642 },
});
const your_img_url = "https://avatars.githubusercontent.com/u/22879378?v=4";
var icon = {
url: your_img_url + '#custom_marker', // url + image selector for css
scaledSize: new google.maps.Size(32, 32), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
const marker = new google.maps.Marker({
position: { lat: 23.8178689, lng: 90.4213642 },
map,
icon: icon,
});
}
</script>
And your CSS style are -
<style>
img[src$="#custom_marker"]{
border: 2px solid #900 !important;
border-radius:50%;
}
</style>
Output:

Answer 3

If you want to make a circular marker just check the documentation This is faster and more lightweight.
Otherwise, just make your actual icon into a circular shape.