Google Maps API – Place A Marker On The Map

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.

[blog-in-between-card]

Instantiate Marker Object

let marker = new google.maps.Marker({
    position: new google.maps.LatLng(45.424807 -75.699234),
    map: map
});

There you have it!

Animate Marker

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