Google Maps API Tutorials (JavaScript)

Google Maps API – Place A Marker On The Map

Last modified on May 11th, 2021
Raja Tamil
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.

[blog-in-between-card]

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
})

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW