changing google map marker colors

StackOverflow https://stackoverflow.com/questions/22171638

  •  03-06-2023
  •  | 
  •  

Question

How do I change the colours of the Icons easily? I just want to be able to change it to a different colour using googles standard markers? Is there a way where I can just declare the color where I create the marker with var = marker..... ? 

<script type="text/javascript"> 

var map = null;
function initialize() {
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(54.2361100,-4.5480600),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

var point = new google.maps.LatLng(50.7184100,-3.5339000); 
  var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>')


  var point = new google.maps.LatLng(50.9097000,-1.4043500);
  var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>')

}

var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});

function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
}



</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div id="map_canvas" style="width: 535px; height: 500px"></div>
Was it helpful?

Solution

Adjusting Sean's answer from here How can I change the color of a Google Maps marker?.

Try changing your create marker function to

function createMarker(latlng, html, iconName) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: iconName,
    zIndex: Math.round(latlng.lat()*-100000)<<5
});

And then call it with

var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>', 'brown_markerA.png')

Making sure you place all the icons in the same place as your map page.

You can then adjust how you build up the string for different colors or letters.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top