javascript - How to change the Markers label text color? - Stack Overflow

admin管理员组

文章数量:1287584

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.

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.

• javascript
• google-maps
• google-maps-api-3
• label
• google-maps-markers

Share Improve this question Follow edited Oct 14, 2016 at 13:26 geocodezip 161k1414 gold badges226226 silver badges255255 bronze badges asked Oct 14, 2016 at 11:51 JohannesJohannes 10511 gold badge22 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

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

本文标签： javascriptHow to change the Markers label text colorStack Overflow