Thanks to all here for putting this out there, it helped me a lot. For anyone who is looking at is (at least as of September 2021), the docs altered for this on google and now the HTML, CSS, and JS are seperated. I watched @magicmark’s video and analysed the patern his code was for him at the time and combined it into one HTML code so that we can put it in the Before </body> tag section for the custom code on your page and you can see the sample below:
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(value, value),
mapTypeId: 'roadmap'
});
var iconBase = 'https://uploads-ssl.webflow.com/<string of characters>/';
var icons = {
hq: {
icon: iconBase + '<characters after forward slash>'
},
};
var features = [{
position: new google.maps.LatLng(value,value),
type: "hq"
}, ];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<your API Key>&&callback=initMap">
</script>
</body>
</html>
I only needed one pin and one icon but to add more you simply repeat what you put inbetween the var icons = { and }; after the }, for icons and inbetween the var features = [ and ]; after the }, for the pins.
As for the info boxes, I have not yet attemped to play with the code to add them as well, if I do I will update this post, otherwise you can attempt looking at @Andy_Vaughan’s solution and playing around with it though a quick look showed that the HTML, CSS, and JS are also seperated there.
Either way, Mark’s video perfectly shows how to add the custom pins, and you should certainly watch it as it is still available as of now. I only added this to make the process of combining the HTML, CSS, and JS easier for anyone who comes across this.
Good luck!
Update
So after testing it a bit, if you run into a problem like me where the map was appearing in the div block and beneath your footer (if you have one) leaving your page looking like this:
Looking back at the logic, we do not need the HTML and Body tags, so you should keep ONLY this part of the code:
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-15.436481, 28.339249),
mapTypeId: 'roadmap'
});
var iconBase = 'https://uploads-ssl.webflow.com/613cbd955b97f2ad46250282/';
var icons = {
hq: {
icon: iconBase + '613de0c19900f86c2124be0f_custom%20logo%20pin.png'
},
};
var features = [{
position: new google.maps.LatLng(-15.436605, 28.339216),
type: "hq"
}, ];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBD7r6di-NHOgwSxDwYY8wakNElAv5snw&&callback=initMap">
</script>
After doing that, it worked flawlessly for me:
Just some notes to add, height as percent was not shwoing the div block for me on the live website so I had to use PX sizing real quick to show it working instead which is why the map is an odd size there.
as I mention, I’m not proficient in Javascript yet! 
