Google Maps API Tutorials (JavaScript)

Google Maps API – Place A Marker On The Map

Last modified on May 11th, 2021
Google Maps API Javascript

The first step is to instantiate the Google Maps map object where you want to place a marker onto.

var map = new google.maps.Map(document.getElementById("map"), {
   zoom: 13
   center: new google.maps.LatLng(45.424721, -75.695000),
   mapTypeId: google.maps.MapTypeId.ROADMAP
});

In this example, the map is centered based on latitude and longitude values of a random place in Ottawa, Canada.

Now, let’s place a marker using exact latitude and longitude values.

Instantiate Marker Object

let marker = new google.maps.Marker({
    position: new google.maps.LatLng(45.424807 -75.699234),
    map: map
});
property namevalue
positionThe value is the LatLng object with the actual latitude and longitude values of a place where the marker is going to be pinned. For example, 45.424807 -75.699234 are the latitude and longitude values of Parliament Hill in Ottawa.
mapThe actual Google Maps map object.

There you have it!

Animate Marker

new google.maps.Marker({
    ...
    animation: google.maps.Animation.DROP
})