Google map marker label text color change

Question

I am trying to change the Google map marker label color to white, while hover the event. How can i change the label color.

My code is

function hover(id) { 

var icon2 = "<?php  echo base_url(). "bootstrap/images/tooltip_solid.png";?>";
    for ( var i = 0; i< markers.length; i++) { 
        if (parseInt(id) == parseInt(markers[i].id)) {  
           markers[i].setIcon(icon2); 
            markers[i].setZIndex(99999999999999);

           break;
        }
   } 
}

Answer 1

Simplest way is to create mouseover/mouseout event handlers for each marker to update the label text color.

// creates a marker with a closure for the event functions.
function createMarker(latLng, text, label) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    label: {text: label, color: "white"}
  });
  google.maps.event.addListener(marker, "mouseover", function(evt) {
    var label = this.getLabel();
    label.color="black";
    this.setLabel(label);
  });
    google.maps.event.addListener(marker, "mouseout", function(evt) {
    var label = this.getLabel();
    label.color="white";
    this.setLabel(label);
  });
  return marker;
}

proof of concept fiddle

code snippet:

 var geocoder; var map; function initialize() { 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 }); // Mountain View, CA, USA (37.3860517, -122.0838511) var marker1 = createMarker({ lat: 37.3860517, lng: -122.0838511 }, "Mountain View, CA", "A"); // Palo Alto, CA, USA (37.4418834, -122.14301949999998) var marker2 = createMarker({ lat: 37.4418834, lng: -122.14301949999998 }, "Palo Alto", "B"); // Stanford, CA, USA (37.42410599999999, -122.1660756) var marker3 = createMarker({ lat: 37.42410599999999, lng: -122.1660756 }, "Stanford, CA", "C"); var bounds = new google.maps.LatLngBounds(); bounds.extend(marker1.getPosition()); bounds.extend(marker2.getPosition()); bounds.extend(marker3.getPosition()); map.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", initialize); function createMarker(latLng, text, label) { var marker = new google.maps.Marker({ position: latLng, map: map, label: { text: label, color: "white" } }); google.maps.event.addListener(marker, "mouseover", function(evt) { var label = this.getLabel(); label.color = "black"; this.setLabel(label); }); google.maps.event.addListener(marker, "mouseout", function(evt) { var label = this.getLabel(); label.color = "white"; this.setLabel(label); }); return marker; } 

 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> 

Answer 2

Try this

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