Introduction
A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as “icons.” Markers and icons are objects of type Marker. You can set a custom icon within the marker’s constructor, or by calling setIcon() on the marker. See more about customizing the marker image.
Broadly speaking, markers are a type of overlay. For information on other types of overlay, see Drawing on the map.
Markers are designed to be interactive. For example, by default they receive ‘click’ events, so you can add an event listener to bring up an info window displaying custom information. You can allow users to move a marker on the map by setting the marker’s draggable property to true. For more information about draggable markers, see below.
Add a marker
The google.maps.Marker constructor takes a single Marker options object literal, specifying the initial properties of the marker.
The following fields are particularly important and commonly set when constructing a marker:
– position (required) specifies a LatLng identifying the initial location of the marker. One way of retrieving a LatLng is by using the Geocoding service.
– map (optional) specifies the Map on which to place the marker. If you do not specify the map on construction of the marker, the marker is created but is not attached to (or displayed on) the map. You may add the marker later by calling the marker’s setMap() method.
The following example adds a simple marker to a map at Uluru, in the center of Australia:
JavaScript
function initMap() {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
}
window.initMap = initMap;
TypeScript
function initMap(): void {
const myLatLng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: myLatLng,
}
);
new google.maps.Marker({
position: myLatLng,
map,
title: "Hello World!",
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
Further Marker Customization
For further extensions of the Marker class, marker clustering and management, and overlay customization, see open source libraries.
