I am trying to use a custom image as a marker in Google Maps using AdvancedMarkerElement, but the image is not appearing on the map. However, there are no errors in the console.

Here is my code:

    const markerImage = document.createElement('img'); 
    markerImage.src = "/mapMarker.png";
    markerImage.alt = coord.name;
    markerImage.style.width = "40px";
    markerImage.style.height = "40px";
    markerImage.style.borderRadius = "50%";
    markerImage.style.border = "2px solid white";
    markerImage.style.boxShadow = "rgba(0, 0, 0, 0.3) 0px 2px 6px";

    markerContainer.className = 'marker-container';
    markerContainer.appendChild(markerImage);

    const marker = new AdvancedMarkerElement({
      position: new google.maps.LatLng(coord.latitude, coord.longitude),
      map: this.map,
      content: markerContainer,
      title: coord.name
    });

    this.markers.push(marker);
    this.bounds.extend(position);
    markersForCluster.push(new google.maps.Marker({ position }));

    this.map.fitBounds(this.bounds);

    // Adding Marker Cluster
    var mcOptions = {
      imagePath: this.custerIcon,
      styles: [{
        url: this.custerIcon,
        width: 53,
        height: 53,
        textSize: 15,
        textColor: "white",
      }]
    };

    var mc = new MarkerClusterer(this.map, markersForCluster, mcOptions);

What I Have Tried
I am using the content option in AdvancedMarkerElement to pass my custom image inside markerContainer.

The marker cluster (MarkerClusterer) is working fine, and I can see the custom cluster icon on the map.

However, the custom marker image is not appearing on the map.

Expected Outcome
I expect to see the custom image (/mapMarker.png) as a marker on the map instead of the default marker.

What could be causing this issue? How can I properly display the custom image as a marker?

I am trying to use a custom image as a marker in Google Maps using AdvancedMarkerElement, but the image is not appearing on the map. However, there are no errors in the console.

Here is my code:

    const markerImage = document.createElement('img'); 
    markerImage.src = "/mapMarker.png";
    markerImage.alt = coord.name;
    markerImage.style.width = "40px";
    markerImage.style.height = "40px";
    markerImage.style.borderRadius = "50%";
    markerImage.style.border = "2px solid white";
    markerImage.style.boxShadow = "rgba(0, 0, 0, 0.3) 0px 2px 6px";

    markerContainer.className = 'marker-container';
    markerContainer.appendChild(markerImage);

    const marker = new AdvancedMarkerElement({
      position: new google.maps.LatLng(coord.latitude, coord.longitude),
      map: this.map,
      content: markerContainer,
      title: coord.name
    });

    this.markers.push(marker);
    this.bounds.extend(position);
    markersForCluster.push(new google.maps.Marker({ position }));

    this.map.fitBounds(this.bounds);

    // Adding Marker Cluster
    var mcOptions = {
      imagePath: this.custerIcon,
      styles: [{
        url: this.custerIcon,
        width: 53,
        height: 53,
        textSize: 15,
        textColor: "white",
      }]
    };

    var mc = new MarkerClusterer(this.map, markersForCluster, mcOptions);

What I Have Tried
I am using the content option in AdvancedMarkerElement to pass my custom image inside markerContainer.

The marker cluster (MarkerClusterer) is working fine, and I can see the custom cluster icon on the map.

However, the custom marker image is not appearing on the map.

Expected Outcome
I expect to see the custom image (/mapMarker.png) as a marker on the map instead of the default marker.

What could be causing this issue? How can I properly display the custom image as a marker?

• google-maps
• google-maps-markers
• google-maps-api-2
• google-maps-advanced-marker-element
• googlemapsjs-markerclusterer

1 Answer 1

I am not sure the content supports full html. From the examples:

// A marker with a with a URL pointing to a PNG.  
    const beachFlagImg = document.createElement('img');  
    beachFlagImg.src = 'https://developers.google/maps/documentation/javascript/examples/full/images/beachflag.png';  
  
    const beachFlagMarkerView = new AdvancedMarkerElement({  
        map,  
        position: { lat: 37.434, lng: -122.082 },  
        content: beachFlagImg,  
        title: 'A marker using a custom PNG Image',  
    });

and the one using some html

  const priceTag = document.createElement('div');
  priceTag.className = 'price-tag';
  priceTag.textContent = '$2.5M';

  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.42, lng: -122.1 },
    content: priceTag,
  });

Here is a JSFiddle that does the same. https://jsfiddle/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/advanced-markers-graphics/jsfiddle

So I suggest you load the image directly, without styling and img tag etc. If you still need help, consider creating a jsfiddle. You should in that case specify your image as a binary string.