Reputation: 871

Customize Google Map API V3 Marker label

function initMap() {
  var uluru = {lat: 13.676442, lng: 100.638276};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    label: {
      text: "$300k",
      color: "#4682B4",
      fontSize: "30px",
      fontWeight: "bold"
    },
    title: "Hello World!",
    visible: true
  });
}

I want to customize the label. I try to find the answers in google documentation they have only few properties to change (https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions) then I search on google the most answer is MarkerWithLabel but the problem is the link doesn't work any more http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js" so I cannot use the library. I attach pictures from my code and what I want. Can any one help me please?

Upvotes: 17

Answers (5)

vikash vishwakarma

Reputation: 69

You can customise the object by defining in html string then assign to the object:

       let arrayElem = '<h4> Details</h4><br>Employee 
       ID:'+element.EmpID+'<br>Coordinates:'+element.lat+', 
       '+element.lng+'<br>Sequence ID:'+element.seqId+'<br> 
        <a>RouteID</a>:'+RouteId;


        let marker = {icon:'./assets/desticontest.png',
                      label:{text:element.seqId.toString(),
                             fontSize: "20px",
                              fontWeight: "bold",
                              color:'black'},
                      opacity:0.8,
                      infoWindow:arrayElem
                      };

Upvotes: 1

quackymack87

Reputation: 1

How the Google map is rendered here might help you: http://simplify.quedank.com/loop-google-maps-markers-and-coordinates-from-wordpress-posts/

The idea is that, it's better to separate your marker variable from your initMap(). That way you can create a separate function for your marker then use an addListener to automatically show the label:

<!-- Create variable "map" -->
var map;
<!-- Initiate/render map with this function -->
function initMap() {
    <!-- Edit latitude and longitude coordinates to focus on a specific region on the map -->
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 35.7932977, lng: -78.6551929 },
        scrollwheel: false,
        zoom: 11
    });         
}
<!-- This is the function to add markers for each post. This includes the marker, the information window, and a function to show info when clicked -->
function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map
    });
    var infoWindow = new google.maps.InfoWindow({
        content: props.content
    });
    marker.addListener('load', function() {
        infoWindow.open(map, marker);
    });
}

Then use the 'content' property to add the label as seen on line 52. Something like:

addMarker({coords:{lat: 00000000000, lng: 00000000000}, content:'<h5>$2.3M</h5>'});

Upvotes: -1

Acuna

Reputation: 1837

You can add your own class with label.className key:

map: map,
draggable: true,

label: {
        
    text: value.title,
    className: 'marker-label',
      
}

But you must know that Google adds another styles for every marker programmaticaly:

color: rgb(0, 0, 0);
font-size: 14px;
font-family: Roboto, Arial, sans-serif;

So you must override its values by yourself programmaticaly not in css according @vikashvishwakarma answer because styles have more priority as classes.

Upvotes: 10