How to change Google Map Marker Label and Image

Sandeep Yadav

4 years ago

In this post, I’ll show you how to embed Google map on website and generate a map with your own icons.

Creating API keys:

To create an API key follow these steps:

Go to the APIs & Services > Credentials page.
On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
The new API key is listed on the Credentials page under API keys.

Generating a map:

You must include an API key in your project request. Replace YOUR_API_KEY with your API key.

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

Create a index.html file and insert below code.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" defer></script>
  
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Adding Markers Label:

function initMap() {
  const myLatLng = { lat: -24, lng: 130 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });
  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "The Knowledge Adda",
  });
}

Adding Markers Icon:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24, lng: 130 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -26.89, lng: 133.274 },
    map,
    icon: image,
  });
}