Create modern google maps with custom theme, custom marker and marker popup.

Please don’t forget to add your Google Maps API key to this code, otherwise, it will not work. Map theme, marker image, and marker popup design can be easily modified by customizing the given code snippet according to the requirements.

Customizations 

Various customization which can be applied to this custom Google Map are given below.

• zoom –The zoom level of the map on page load, currently it’s 15.
• center – Sets the center location of the map on page load.
• position – Marker position.
• icon – Path of the custom map marker image.
• styles – Color styles in this array can be modified to change the overall theme design.

 

<script src="https://maps.googleapis.com/maps/api/js?key=Your_Google_Maps_API_Key_Goes_Here&callback=initMap&libraries=&v=weekly&channel=2" async></script>
<script type="text/javascript">
function initMap() {
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(48.8566, 2.3522),
        title: "Hello World!",
        styles: [{
                "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#444444"
                }]
            },
            {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [{
                    "color": "#f2f2f2"
                }]
            },
            {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            },
            {
                "featureType": "road",
                "elementType": "all",
                "stylers": [{
                        "saturation": -100
                    },
                    {
                        "lightness": 45
                    }
                ]
            },
            {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [{
                    "visibility": "simplified"
                }]
            },
            {
                "featureType": "road.arterial",
                "elementType": "labels.icon",
                "stylers": [{
                    "visibility": "off"
                }]
            },
            {
                "featureType": "transit",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            },
            {
                "featureType": "water",
                "elementType": "all",
                "stylers": [{
                        "color": "#b6c2d4"
                    },
                    {
                        "visibility": "on"
                    }
                ]
            }
        ]
    };
    var mapElement = document.getElementById('map');
    const map = new google.maps.Map(mapElement, mapOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(48.8566, 2.3522),
        map: map,
        icon: 'https://www.iconsdb.com/icons/download/soylent-red/map-marker-2-48.png'
    });
    var customPopup = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', (function(marker) {
        return function() {

            var popupContent = '<div class="marker-popup">' +
                '<h4>Paris, <br>22 Avenue Niel</h4>' +
                '<p><a href="mailto:[email protected]">mailto:[email protected]</a></p>' +
                '<p><a href="tel:+1234567890">+1234567890</a></p>' +
                '</div>';
            customPopup.setContent(popupContent);
            customPopup.open(map, marker);

        }
    })(marker));
}
</script>
<div id="map" style="height:450px"></div>