Changing Google Maps marker icon to custom icon

Question

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>

score 2 · Answer 1 · answered Aug 01 '17 at 12:28

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'
});

score 2 · Answer 2 · answered Jan 23 '20 at 14:49

If we want to apply width and height to custom icon,

Refer to the below code,

let icon = {
   url: './path/path/custom_icon.png',
   scaledSize: { width: 69, height: 41 }
}
marker = new google.maps.Marker({
  position: pos,
  map: map,
  title: 'sample title',
  icon: icon
});
marker.setMap(map);

score 0 · Answer 3 · answered Aug 01 '17 at 12:13

0

In the "var marker" object, there is an "icon" parameter. According to the documentation here, you want to make another variable with your icon stored in it, and then set the icon inside of the marker object you currently have.

answered Aug 01 '17 at 12:13

Dream_Cap

2,292
2
18
30

SphynxTech · Answer 4 · 2017-08-02T06:29:06.730

0

There are two ways to set an icon on a marker. You can set the icon during the initialization of the marker or after (with marker.setIcon (yourUrl)).

Witch give:

Initialization

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
  position: {lat: -33.890, lng: 151.274},
  map: map,
  icon: image
 });
}

After initialization

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
  position: {lat: -33.890, lng: 151.274},
  map: map,
 });
}

beachMarker.setIcon (image);

Here is the complete doc and here the google maps api reference.

edited Aug 02 '17 at 06:29

answered Aug 01 '17 at 13:12

SphynxTech

1,799
2
18
38

This works great, however only with the Google beach flag icon you've supplied, all the Google Icons work as normal, yet when I link to my own icon it doesn't. ` var image = '/Images/Assets/pp-location-split.svg'; var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, title: 'Precision Profiles Manufacturing' });` – Kieran Hawes Aug 02 '17 at 09:14
I must be linking my custom icon image incorrectly, thats the only reason I can think that would cause the Google icons to appear but not my own! – Kieran Hawes Aug 02 '17 at 09:19
Try to set a complete url when you initialize the icon. Do you see some errors in your console? – SphynxTech Aug 02 '17 at 11:36

Flo Develop · Answer 5 · 2022-01-10T20:52:53.557

0

You cannot modify the default Google Maps markers, you can only hide them.

So Maybe you can :

1/ Hide the default markers :

const styles = {
  hide: [
    {
      featureType: "poi",
      stylers: [{ visibility: "off" }],
    },
  ],
};
map.setOptions({ styles: styles['hide'] });

2/ Then make a nearby Place request.

3/ And add your own marker with your custom image.

edited Jan 10 '22 at 20:52

answered Jan 10 '22 at 11:34

Flo Develop

655
1
6
9

Changing Google Maps marker icon to custom icon

5 Answers5