Introduction to Markers

Learn how to add and customize markers that identify a location on a map.

We'll cover the following

Markers make it possible to identify locations on a map. They are an excellent way to highlight important places by setting custom icons. This lesson focuses on the basics of how to add or remove markers and make them draggable.

Add a simple marker

To add a marker on a map, we must create a map first. We use the google.maps.Marker constructor to add a marker. It takes an object that specifies the initial marker properties as input.

The Marker constructor takes in the MarkerOptions parameter. This parameter defines the LatLng coordinates for its position and alters the marker’s visual features with a style set.

Default marker in Google Maps

The MarkerOptions parameters

All MarkerOptions parameters are optional, so there are no required parameters. Here’s a list of all optional MarkerOptions parameters that we can pass to the Marker constructor:

Parameters

Type

Description

position

LatLng|LatLngLiteral

This parameter specifies the initial location of the marker using the latitude and longitude coordinates.

map

Map | StreetViewPanorama

This parameter specifies the map that will have markers rendered on it.

anchorPoint

Point

This parameter is used when an info window with the marker as an anchor opens. It specifies the offset between the tip of the info window and the marker's position.

animation

Animation

This parameter specifies the type of animation that plays when a marker is added to the map. The Animation datatype has these possible values—null, BOUNCE, and DROP.


By default, the Animation value is null.


The BOUNCE value renders an animation of a bouncing marker. The animation stops when the parameter value changes to null.


The DROP value renders an animation of a marker falling from the top of the map to its actual location. The animation stops when we change the parameter value to null or when the marker comes to rest at its final location.

crossOnDrag

boolean

This parameter specifies whether to disable the cross that appears beneath the marker when its dragged. By default, the editable value is true.

cursor

string

This parameter specifies the type of cursor that appears when hovering over the marker.

clickable

boolean

This parameter specifies whether the Marker can handle mouse events. By default, the clickable value is set as true.

draggable

boolean

This parameter allows the user to drag the markers across the map when it is set to true. The geodesic parameter can alter this dragging behavior. By default, the draggable value is set to false.

icon

string | Icon | Symbol

This parameter specifies an icon for the map foreground that replaces the default Google Maps marker icon. When a string is passed, that string is used as a URL for the icon.

label

string | MarkerLabel

This parameter specifies the label to display with the marker. This label is either a letter or number that will appear inside a marker.

opacity

number

This parameter specifies a numerical value between 0.0 and 1.0, which determines the opacity of the marker's fill color. By default, the fillOpacity value is set to 0.35.

optimized

boolean

This parameter is used for optimization when too many markers are on the map. It improves map performance by rendering markers as a single static element.

shape

MarkerShape

This parameter specifies the clickable region of the marker. The MarkerShape constructor takes in two properties—the coords parameter defines the pixel position of the shape and the type parameter defines the shape's type, which can be circle, poly, or rect.

title

string

This parameter specifies the marker's title, which is rendered as rollover text.

visible

boolean

This parameter specifies whether the markers are displayed on the map or not.

zindex

number

zIndex This parameter represents the overlay order when different drawing objects are placed in front of each other. A smaller-value zIndex object comes in front a of larger-value zIndex object.

We can construct a Marker object without any parameters since all parameters are optional. However, to display a Marker, we must provide the map and the position parameters and set the visible parameter value as true.

All other parameters, including map and position, can be provided during construction or after construction using the setValues() method. We can also use setMap() to update the map parameter.

Here’s an example of how to construct a Marker:

Press + to interact
new google.maps.Marker({
	position: { lat: 29.9792, lng: 31.1342 }, // Coordinates of the Great Pyramid of Giza
	map: map,
	anchorPoint: google.maps.Point(50, 50), // An info window with anchor set on current marker
	animation: google.maps.Animation.DROP,
	crossOnDrag: true,
	cursor: "crosshair",
	clickable: true,
	draggable: true,
	//icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/",
	label: "1",
	opacity: 1,
	optimized: false,
	shape: { coords: [25, 25, 25], type: "circle" },
	title: "Great Pyramid of Giza",
	visible: true,
	zIndex: 1,
});

Code example

The example below adds a simple marker to identify Mount Everest on a map:

Console
Add a simple marker
We place the marker on the map using the marker’s map property. Here’s a brief explanation of the JavaScript file in the code widget above:


    

  • Line 4:  We declare the everest variable to store the coordinates of Mount Everest.
    • 

  • Lines 13–17: We define a Marker object and set the everest coordinates as its position.
    • 

  • Line 16: We set the draggable property to true, which allows users to drag a marker to a different location on the map.
    • 

  • Line 24: We attach a marker to the map using the setMap() method.
    • 

  • Comment out lines 13-17 and uncomment lines 19-24 to facilitate the testing of the setMap() method.
    • 



Remove a marker


To remove an existing marker, set the marker object as null, effectively deleting it from the map. This is done by calling the setMap() method and passing null as an argument, like this:


marker.setMap(null);



Code example


In the example below, a centered marker is added at the given coordinates on the map when the user clicks on the “Add Marker” button. The center marker is removed when the user click the “Remove Marker” button:


Remove a marker
Here’s a breakdown of the HTML file in the code widget above:


    

  • Lines 8–11: We create a separate div element just above the map’s div element.
    • 

  • Line 9: We create an input button whose id is add-marker. This button adds the marker.
    • 

  • Line 10:  We create another input button, whose id is remove-marker. It removes the marker.
    • 



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


    

  • 

    Line 22: We add an event listener to identify the click event that adds a marker when the “Add Marker” button is clicked on the map. This calls the addMarker() method.
    

    • 

  • 

    Line 25: We add an event listener to identify the click event to remove the marker when we click on the “Remove Marker” button. This calls the removeMarker() method.
    

    • 

  • 

    Lines 29–33: The addMarker() method is defined.
    

    • 

  • 

    Line 30: The setMap() method renders the marker object over the map.
    

    • 

  • 

    Lines 36–40: The removeMarker() method is defined, which removes the marker object by setting its map parameter to null.
    

    •