Changing Google Maps marker icon to custom icon

Kieran Hawes picture Kieran Hawes · Aug 1, 2017 · Viewed 8.1k times · Source

I have been developing a site using Adobe muse, I have chosen to implement a customised Google Map on the company's contact page. I have done so using some basic javascript, inserted into the Muse document by inserting 'HTML Element' within there I have my JS.

I should also mention I have the Google Maps API (with my relevant key) linked in the 'head' of the page, via the page's Metadata (accessed via Page > Page Properties > Metadata within Muse).

Following the guides supplied by Google, I have created a custom map and then applied some extra styling, using JS generated through [https://snazzymaps.com].

My problem arises in trying to replace the default marker icon, with my own marker created in illustrator (stored locally on my iMac), I've followed a load of different guides and tried multiple ways of implementing the custom icon, but have had no luck whatsoever - can someone please show me where I'm going wrong? It'd be much appreciated.

Here's how my JS looks within the Muse HTML Element >

<script> 
function initMap() {
var myLatLng = {lat: 51.454137, lng: -2.473673};

var map = new google.maps.Map(document.getElementById('u64615'),{
    zoom: 16,
    center: myLatLng,
    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": "poi",
    "elementType": "geometry",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#f10019"
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
        {
            "visibility": "simplified"
        },
        {
            "color": "#f10019"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.attraction",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "geometry",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "visibility": "simplified"
        },
        {
            "color": "#f10019"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels.text",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        },
        {
            "weight": "0.01"
        }
    ]
},
{
    "featureType": "poi.government",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.medical",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.park",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.place_of_worship",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.school",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.sports_complex",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#163742"
        },
        {
            "visibility": "on"
        }
    ]
}]


 });

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Precision Profiles Manufacturing'
});

var contentString = 
    '<div>'+
    '<div>'+
    '</div>'+
    '<h1 style = "font-size:20px;padding-bottom:10px;"><b>Precision Profiles Manuafcturing</b></h1>'+
    '<div id="bodyContent">'+
    '<p>The regions leading supplier of aircraft and precision engineering solutions.<p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200,
    maxHeight: 400,
});

marker.addListener('click', function() {
    infowindow.open(map, marker);
});    }   </script>

Answer

G.Hunt picture G.Hunt · Aug 1, 2017

A quick look through the Google Maps API would get you to this page.

Delving deeper into the API, you can see that when you instantiate a new google.maps.Marker there will be an optional property named icon:. This is where you can specify a string path to the directory in which you store the image you'd like to use.

So in full, the code to instantiate a new marker class would be:

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: "https://your_domain.com/your_directory/your_image.jpg",
    title: 'Precision Profiles Manufacturing'
});