How to customize Google Maps AdvancedMarkerView in a dynamic map? - wordpress

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.