How to Customize Google Map Marker Icon

In my previous blog, I have explained How to Display Google Map with Marker using Latitude & Longitude. Here, I am going to explain how to customize the google map marker icon more attractive.

Simple Google Map:

First, create simple google map by using the below code,

<html>
    <head>
        <title>How to Customize Google Map Marker Icon</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-GOOGLE-API-KEY>&language=en&callback=initMap" async defer></script>
        <script type="text/javascript">
            var map;
            function initMap() {
                var latitude = 13.0826802;
                var longitude = 80.2707184;
 
                var latlng = {lat: latitude, lng: longitude};
 
                map = new google.maps.Map(document.getElementById('map'), {
                                          center: latlng,
                                          zoom: 14,
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            }
        </script>
    </head>
    <body>
        <div style="padding:10px">
            <div id="map" style="width: 500px; height: 300px;"></div>
        </div>
    </body>
</html>

While running the above code, it will be shown a simple google map without any marker icon.

Adding Simple Marker:

To show the marker on the google map, use the below code. It will show the native google map marker.

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Chennai, Tamilnadu, India'
});

After adding the above code, the marker will be displayed on the google map, and while we hover on the marker icon the custom title Chennai, Tamilnadu, India will be opened.

Customizing Google Map Marker:

Here is the code to show the custom marker image instead of showing google default marker,

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Chennai, Tamilnadu, India',
    icon: {
        url: "images/markers/icon.png",
        scaledSize: new google.maps.Size(64, 64)
    }
});

In the above code,

  • url: set your marker image path
  • scaledSize: set your marker image size

Sometimes we may want to show the information on the popup window while clicking on the google map marker. Here is the code to add the click event for the marker and the configuration of the popup window,

var contentString = '<div id="content">'+
                        '<h1 id="heading" class="heading">Hotel Aarya Bhavan</h1>'+
                        '<div id="body_content">'+
                            '<p>Park Town, Chennai, Tamil Nadu 600003 India</p>'+
                        '</div>'+
                    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

Complete Code:

Here is the complete code to customize the google map marker icon and add the option to display the information window while clicking on the marker icon,

<html>
    <head>
        <title>How to Customize Google Map Marker Icon</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-GOOGLE-API-KEY>&language=en&callback=initMap" async defer></script>
        <script type="text/javascript">
            var map;
            function initMap() {
                var latitude = 13.0826802;
                var longitude = 80.2707184;
 
                var latlng = {lat: latitude, lng: longitude};
 
                map = new google.maps.Map(document.getElementById('map'), {
                                          center: latlng,
                                          zoom: 14,
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var contentString = '<div id="content">'+
                                        '<h1 id="heading" class="heading">Hotel Aarya Bhavan</h1>'+
                                        '<div id="body_content">'+
                                            '<p>Park Town, Chennai, Tamil Nadu 600003<br/> India</p>'+
                                        '</div>'+
                                    '</div>';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                             position: latlng,
                             map: map,
                             title: 'Chennai, Tamilnadu, India',
                             icon: {
                                url: "images/markers/icon.png",
                                scaledSize: new google.maps.Size(64, 64)
                            }
                         });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });

            }
        </script>
    </head>
    <body>
        <div style="padding:10px">
            <div id="map" style="width: 800px; height: 500px;"></div>
        </div>
    </body>
</html>

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *