How to customize Google Maps AdvancedMarkerView in a dynamic map?

Question

I'm using ACF to create maps from custom product fields in WordPress/Woocommerce.

/**
 * initMarker
 *
 * Creates a marker for the given jQuery element and map.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @param   object The map instance.
 * @return  object The marker instance.
 */
function initMarker( $marker, map ) {

    // Get position from marker.
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
        lat: parseFloat( lat ),
        lng: parseFloat( lng )
    };

    // Create marker instance.
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

    // Append to reference for later use.
    map.markers.push( marker );
    
    // If marker contains HTML, add it to an infoWindow.
    if( $marker.html() ){

        // Create info window.
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        // Show info window when marker is clicked.
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
}

I'd like to style my initial marker with custom colors.

Google Maps documentation instructs how to work with a defined position, as follows, but if I delete the position line, my map just disappears.

  // [START maps_advanced_markers_basic_style_background]
  // Change the background color.
  const pinViewBackground = new google.maps.marker.PinView({
    background: "#FBBC04",
  });
  const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinViewBackground.element,
  });
  // [END maps_advanced_markers_basic_style_background]
  // [START maps_advanced_markers_basic_style_border]
  // Change the border color.
  const pinViewBorder = new google.maps.marker.PinView({
    borderColor: "#137333",
  });
  const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinViewBorder.element,
  });
  // [END maps_advanced_markers_basic_style_border]

Is there a way I can apply the above mentioned styles in a dynamic map?

Answer 1

Yes, you can style your markers dynamically using the icon property of the google.maps.Marker object.

You can specify a URL to a custom icon, or you can create a custom icon programmatically using a google.maps.Symbol object, which allows you to set various properties such as the fill color, stroke color, and path.

Here's an example that sets the marker's fill color to blue:

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: '#0000FF',
        fillOpacity: 1,
        strokeColor: '#000000',
        strokeWeight: 2,
        scale: 1
    }
});

You can adjust the path and other properties to get the desired appearance for your markers.