CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3labelgoogle-maps-markers
Johannes
Johannes

Reputation: 105

How to change the Markers label text color?

I have the problem that the label will stay black even with the labelColor property in JavaScript but i want to have it white is there any way to do so? Maybe a workaround? 

for (i = 0; i < locations.length; i++) {var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: labels[i],
    labelClass: "labels", // the CSS class for the label
    labelColor: '#fff',
    labelInBackground: false,
    icon: locations[i][4]
});

The problem is that I have custom icons that I want to use and I don't want to create some SVG first. Thanks to anyone who can help me here.

Upvotes: 0

Views: 10006

Answers (2)

geocodezip
geocodezip

Reputation: 161334

To set the label properties for a google.maps.Marker you need to use a MarkerLabel object:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(37.4419, -122.1419),
  map: map,
  label: {
    text: 'A',
    color: 'white',
  }
});

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map,
    label: {
      text: 'A',
      color: 'white',
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Upvotes: 11

Pavlo Chebotiuk
Pavlo Chebotiuk

Reputation: 21

Try to check ".labels" class in CSS, maybe you should to change color in css file.

Upvotes: -1

Related Questions