You just have to copy below code and it in your application. I have explained it with comments in the code. So you can understand it by better way.
<script>
function initMap() {
/* Here define your markers in array format */
var locations = [
['Your Location', 45.070711, 7.683895, 4, 'Your custom marker address', 'youremail@google.com'],
['Your Location 2', 45.070711, 7.683895, 4, 'Your custom marker address', 'youremail@google.com'],
['Your Location 3', 45.070711, 7.683895, 4, 'Your custom marker address', 'youremail@google.com']
];
/* Add your div id here */
var mapDiv = document.getElementById('your-id');
var map = new google.maps.Map(mapDiv, {
/* Add your lat lang of location where you want to make map center */
center: {lat: 22.304240, lng: -39.721336},
/* There are options to show controls as per your feasibility */
zoom: 2,
scrollwheel: false,
disableDefaultUI: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
/* Here is style of your map, you can generate it from https://mapstyle.withgoogle.com/ this site. Copy json from there and paste here. */
styles:[
{
"elementType": "geometry",
"stylers": [
{
"color": "#14cb56"
}
]
},
{
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#19e161"
},
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#19e161"
},
{
"visibility": "on"
},
{
"weight": 1
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#19e161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1b1b1b"
}
]
},
{
"featureType": "road",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#19e161"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8a8a8a"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#19e161"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#19e161"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#19e161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#19e161"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
}
]
});
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Create a marker and set its position.
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
icon:'images/marker.svg',
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
/* Here is the your goole map info window structure */
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var contentString = '<div id="td-map-content">'+
'<div class="invo-contact-info-box">'+
'<div class="invo-contact-info-box-cnt">'+
' <h3>'+locations[i][0]+'</h3>'+
' <hr>'+
' <p>'+locations[i][4]+'</p>'+
' <hr>'+
' <p><a href="mailto:'+locations[i][5]+'">'+locations[i][5]+'</a></p>'+
'</div>'+
'</div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>