web-dev-qa-db-fra.com

Changement de couleur du texte de l'étiquette du marqueur Google Map

J'essaie de changer la couleur de l'étiquette du marqueur de carte Google en blanc, tout en survolant l'événement. Comment puis-je changer la couleur de l'étiquette.

Mon code est

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;
        }
   } 
}
javascriptgoogle-mapsgoogle-maps-markers
14
Brindha

Le moyen le plus simple consiste à créer des gestionnaires d'événements mouseover/mouseout pour chaque marqueur afin de mettre à jour la couleur du texte de l'étiquette.

// 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;
}

preuve de concept violon

extrait de code: 

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>
35
geocodezip

Essaye ça

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