Google Maps Marker Icon Padding Between Icon-fillcolor And Strokecolor
I am trying to create a Google map marker icon with padding between the icon-fillColor and the outer StrokeColor. My Marker Code: marker = new google.maps.Marker({ id: i, position:
Solution 1:
Something like this (using two overlapping markers) should work, you can add additional parameters (or create an "options" object) to define the colors of the various pieces:
functionmakeComplexIcon(map,latLng,fillColor,stripeColor,outsideColor,title,id,label) {
varbottom=newgoogle.maps.Marker({
zIndex:10, //bottomid:id,
position:latLng,
map:map,
title:title,
icon: {
path:google.maps.SymbolPath.CIRCLE,
scale:15,
fillColor:fillColor,
fillOpacity:1.0,
strokeWeight:6,
strokeOpacity:0.8,
strokeColor:outsideColor,
rotation:30
},
});vartop=newgoogle.maps.Marker({
zIndex:15, //topid:id,
position:latLng,
label:label,
map:map,
title:title,
icon: {
path:google.maps.SymbolPath.CIRCLE,
scale:15,
fillColor:fillColor,
fillOpacity:1.0,
strokeWeight:2,
strokeOpacity:0.8,
strokeColor:stripeColor,
rotation:30
},
});
code snippet:
functioninitMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
var position = map.getCenter(),
i = 10;
makeComplexIcon(map, position, "#4A86FE", "white", "red", "My Title", i, {
text: 'id',
color: "white",
fontWeight: 'bold',
fontSize: '16px',
});
makeComplexIcon(map, {
lat: -27.6728168,
lng: 121.6283098
}, "green", "yellow", "orange", "W. Australia", 12, {
text: 'id1',
color: "blue",
fontWeight: 'bold',
fontSize: '16px',
})
makeComplexIcon(map, {
lat: -30.0,
lng: 136.2
}, "black", "white", "black", "S. Australia", 14, {
text: 'id2',
color: "red",
fontWeight: 'bold',
fontSize: '16px',
})
}
functionmakeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
var marker = new google.maps.Marker({
zIndex: 10, // bottomid: id,
position: latLng,
map: map,
title: title,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: fillColor,
fillOpacity: 1.0,
strokeWeight: 6,
strokeOpacity: 0.8,
strokeColor: outsideColor,
rotation: 30
},
});
var marker = new google.maps.Marker({
zIndex: 15, // topid: id,
position: latLng,
label: label,
map: map,
title: title,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: fillColor,
fillOpacity: 1.0,
strokeWeight: 2,
strokeOpacity: 0.8,
strokeColor: stripeColor,
rotation: 30
},
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<divid="map"></div><!-- Replace the value of the key parameter with your own API key. --><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
Post a Comment for "Google Maps Marker Icon Padding Between Icon-fillcolor And Strokecolor"