How can I format the label of a google maps marker

Question

I've been looking all over to find out how to format the text on a custom marker in google maps. I have found some stuff but they all use at least one external js file which I would like to avoid. I read the API documentation on google's site (see link and look under Marker Labels) and it says that a label can be formatted, however there are no examples. I would like to be able to increase the size of the text and change the color Can someone help me?

Here is the link that shows the properties that can be set. https://developers.google.com/maps/documentation/javascript/reference#MarkerLabel

 var icon_img = {
                url: "../img/custom_marker.png",
                scaledSize: new google.maps.Size(40, 50),
                origin: new google.maps.Point(0, 0), 
                anchor: new google.maps.Point(20, 50),
            };

 var sample_marker = new google.maps.Marker({
    position: {lat: my_lat, lng: my_lng},
    map: my_map,
    label: "1",
    icon: icon_img
 });

Solution 1

From google maps developer doc markerLabel

A marker label is a single character of text which will appear inside the marker. If you are using it with a custom marker, you can reposition it with the labelOrigin property in the Icon class.

for this single character the only properties you can configure are

color        string The color of the label text. 
                    Default color is black.
fontFamily  string The font family of the label text 
                    (equivalent to the CSS font-family property).
fontSize    string The font size of the label text 
                    (equivalent to the CSS font-size property). 
                    Default size is 14px.
fontWeight  string The font weight of the label text 
                   (equivalent to the CSS font-weight property).
text        string The text to be displayed in the label. 
                   Only the first character of this string will be shown.

then you can format this way eg:

var sample_marker = new google.maps.Marker({
   position: {lat: my_lat, lng: my_lng},
   map: my_map,
   label: {
         text: "1",
         color: "#F00"
   },
   icon: {
         url: "image_url.png",
         origin: {x: 0, y: 0}
   }
});

Solution 2

I am using markerwithlabel.js

The label can be styled most easily by defining a CSS class with the desired properties for the label DIV

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/docs/examples.html