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 = '

Solution 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.functioncreateMarker(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:

Baca Juga

var geocoder;
var map;

functioninitialize() {
  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);

functioncreateMarker(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
}

<scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script><divid="map_canvas"></div>

Solution 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',
  }
});

JavaScript Square

Google Map Marker Label Text Color Change

Solution 1:

Solution 2:

Post a Comment for "Google Map Marker Label Text Color Change"