Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google map marker label text color change

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;
        }
   } 
}
like image 969
Brindha Avatar asked Jan 05 '17 06:01

Brindha


People also ask

How do I change the color of a marker Label?

Click on the option labeled Tools and then click on Change map. Once there, click on the button labeled Change feature styles. There are plenty of options for changing the different styles of your markers, which includes changing their color.

Can you change labels on Google Maps?

Tap the label you want to edit. At the bottom, tap the place's name or address. Tap Label. Enter a new label name.

How do you customize a marker in maps?

For adding a custom marker to Google Maps navigate to the app > res > drawable > Right-Click on it > New > Vector Assets and select the icon which we have to show on your Map. You can change the color according to our requirements. After creating this icon now we will move towards adding this marker to our Map.


2 Answers

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>
like image 70
geocodezip Avatar answered Nov 03 '22 00:11

geocodezip


Try this

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(37.4419, -122.1419),
  map: map,
  label: {
    text: 'A',
    color: 'white',
  }
});
like image 31
Harsh Patel Avatar answered Nov 02 '22 23:11

Harsh Patel