Marker Customization

By default, a marker’s image is the Google Maps pushpin icon. However, we can customize the marker’s visual appearance by setting a custom image as the marker’s icon and adding text within a marker.

Markers with image icons

An image as a marker’s icon can be specified in place of the default Google Maps pushpin icon. To do this, we set the marker’s icon property to the URL of an image. The following is an example of a custom icon—an image of a mountain—that’s set for the marker:

Code Example

The example below sets an image as the icon of the marker:

Here’s a brief explanation of the JavaScript file in the above code widget:

• Line 9: We define a new Marker object. This is the marker that will have an image assigned as its icon.
• Line 7: We save the image URL of a mountain in the image variable.
• Line 12: We replace the default marker icon with the image of a mountain by assigning the image variable to the icon property of the marker.

Marker labels

A marker label is a letter or a number that appears inside the marker. The marker image below shows a marker label with the letter “A” in it:

When creating a marker, a label property can be specified. The value of the label is what will be displayed in the marker.

label: "<Label Here>",

Code example

Here’s an example of a map with a custom label added to the marker:

Here’s a brief explanation of the JavaScript file in the above code widget:

• Line 9: We define a new Marker object. This is the marker that will be assigned a label.
• Line 11: We add a label to the marker using the character A. The A character is passed to the label property.