Gmap v3 event updating symblo markers colors

Question

I m very new into coding, it s been 3 4 days I m trying to build a website. I started using a wordpress framework, with a nice theme from Elegantthemes called Explora.

This theme is quite limited but I ve managed to change a lot of things in the way it has been built (on front end part only) by changing the responsiveness, the map, the interface and the navigation. Nevertheless, I m stucked on the markers part since my knowledge in coding (jscript and php) is aproximatively around 0.

So here is m y problem :

Withe following code, I intialize markers and I try to give them a circle shape, then, I want to modify the color of the shape while mousing over them ....

 
function et_add_marker( marker_order, marker_lat, marker_lng, marker_description ){
            var marker_id = 'et_marker_' + marker_order;

            $et_main_map.gmap3({
                marker : {
                    id : marker_id,
                    latLng : [marker_lat, marker_lng],
                    options: {
                        //icon : "/images/green-marker.png"  //original marker code
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            fillOpacity: 0.5,
                            //   fillColor: 'ff0000',
                            strokeOpacity: 1.0,
                            strokeColor: 'fff000',
                            strokeWeight: 3.0, 
                            scale: Math.floor(Math.random()*21), //random pixel size until get property
                              }
                    },
                    events : {
                        click: function( marker ){
                            if ( et_active_marker ){
                                et_active_marker.setAnimation( null );
                            //  et_active_marker.setIcon( '/images/black-marker.png' );

                            }
                            et_active_marker = marker;

                            marker.setAnimation( google.maps.Animation.BOUNCE);
                            //marker.setIcon( '/images/green-marker.png' );
                                         marker.setOptions({ fillColor: '#0000ff' }); // this is where it doesn t work and I DON T UNDERSTAND WHY 
                            $(this).gmap3("get").panTo( marker.position );

                            $.fn.et_simple_slider.external_move_to( marker_order );
                        },
                        mouseover: function( marker ){
                            $( '#' + marker_id ).css( { 'display' : 'block', 'opacity' : 0 } ).stop(true,true).animate( { bottom : '15px', opacity : 1 }, 500 );
                        },
                        mouseout: function( marker ){
                            $( '#' + marker_id ).stop(true,true).animate( { bottom : '50px', opacity : 0 }, 500, function() {
                                $(this).css( { 'display' : 'none' } );
                            } );
                        }
                    }
                },
                overlay : {
                    latLng : [marker_lat, marker_lng],
                    options : {
                        content : marker_description,
                        offset : {
                            y:-42,
                            x:-122
                        }
                    }
                }
            });
        }

 

I know that Noobs questions are really annoying in seriouses forums like stackoverflow, and I understand that we, noobs, should first go step by step and learn languages before asking people s help, but this thing goes beyond my patience, I would really appreciate to understand why this MARKER.setOptions.({ fillColor: '#0000ff' }); thing is not working. Thank you so much for reading :)

PS : jscript and php are so weird to me lol but they are fascinating

If you want to see the Wsite : http://www.one-world-guide.com

Answer 1

fillColor is a property of Icon, not Marker, so calling marker.setOptions({fillColor: '0000ff'}) won't work.

Either call setOptions marker.setOptions({icon: {icon props...}}) or marker.setIcon({icon props...})

To avoid having the icon definitions all over the place, you can stick them in variables:

var icon = {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 0.5,
        fillColor: 'ff0000',
        strokeOpacity: 1.0,
        strokeColor: 'fff000',
        strokeWeight: 3.0,
        scale: 20
};
// same as icon but with different fillColor
// could use jQuery.extend({}, icon, {fillColor: '0000ff'}) to clone instead
var iconSelected = {
    path: icon.path,
    fillOpacity: icon.fillOpacity,
    fillColor: '0000ff',
    strokeOpacity: icon.strokOpacity,
    strokeColor: icon.strokeColor,
    strokeWeight: icon.strokeWeight,
    scale: icon.scale
};

var marker = new google.maps.Marker({
    map: map,
    position: location,
    icon: icon
});

Then switch the icon on click:

google.maps.event.addListener(marker, 'click', function() {
    this.setIcon(iconSelected);
});

This is just using the API directly, not gmap3, but I'm sure you get the idea.

Here is a working fiddle to demonstrate. It also has a solution to change the previously selected marker color back.