Is there anyway to change from the default red marker color to a hexidecimal color of my choice? I've been looking all over stack overflow and I haven't seem to find an answer. This is what I have so far.
var marker = new google.maps.Marker({
position: myLatLng,
label: '23',
map: map
});
One option would be to define an SVG symbol for the marker icon. SVG icon colors can be set in their constructor.
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1
};
}
Then use it like this:
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.5, -122.0),
icon: pinSymbol('green')
});
code snippet:
function initialize() { var latlng = new google.maps.LatLng(47.605, -122.2); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ map: map, position: latlng, icon: pinSymbol('red') }); var marker1 = new google.maps.Marker({ map: map, position: new google.maps.LatLng(47.5, -122.0), icon: pinSymbol('#7CFC00') }); var marker2 = new google.maps.Marker({ map: map, position: new google.maps.LatLng(47.6, -122.3), icon: pinSymbol('orange') }); var marker3 = new google.maps.Marker({ map: map, position: new google.maps.LatLng(47.7, -122.1), icon: pinSymbol('yellow') }); } function pinSymbol(color) { return { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1 }; } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
the marker don't have a color property/attribute .. the markers use icon so you can change color changing icon
this is from google-maps dev
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; var beachMarker = new google.maps.Marker({ position: {lat: -33.890, lng: 151.274}, map: map, icon: image });
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.