how to remove shadows of markers on google maps in javascript?

Question

I have some markers on my google map, some markers are under the shadows of another marker. The markers in the shadow are not working. how can i remove the shadows or any other solution for it.

Thanks in advance.

enter code here
 function createMarker(){
                    var s;
                        for (var i = 0, j=0; i < markers_array.length; i++, j++) {
    // obtain the attribues of each marker
                            var lat = parseFloat(markers_array[i][0]);
                            var lng = parseFloat(markers_array[i][1]);
                            //alert(markers_array[i][2]);
                            //alert(markers_array[i][3]);
                            var trailhead_name = markers_array[i][2];
                            var trailhead_name1 = markers_array[i][3];
                            var image = markers_array[i][4];

                            var myLatlng = new google.maps.LatLng(lat, lng);

                            var contentString = trailhead_name;
                            var contentString1= trailhead_name1;
                            var marker=[];
                             marker[i] = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                icon: image,
                                clickable: true,
                                title:markers_array[i][5],

                                });
                            google.maps.event.addListener(map, 'click', function(e) {

                            infobox.close();
                            infobox1.close();
                            infobox2.close();

                            });


                            marker[i]['infowindow'] = contentString;
                            marker[i]['infowindow1']= contentString1;
                            global_markers[i] = marker[i];



                            var la;
                            var lt;
                            google.maps.event.addListener(global_markers[i], 'click', function(e) {
                            infobox.close();
                            infobox1.close();
                            infobox2.close(); 
                            la=this.getPosition().lat();
                            lt=this.getPosition().lng();
                                infobox.setPosition(e.latLng);
                                infobox.setContent(this['infowindow']);
                                infobox.boxStyle_ = {
                                        background: "url('images/tipbox.gif') no-repeat  scroll 0 0 #E1E3E4",

                                        width: "270px"
                                    };
                                infobox.open(map);
                                var title=this.title;
                                s=this['infowindow1'];
                                $(document).delegate("#content", "mouseenter touchstart", function() {
                                map.setOptions({
                                draggable: false,
                                scrollwheel: false
                                });




                                });

                            $(document).delegate("#content", "mouseleave touchend", function() {
                                map.setOptions({draggable: true,scrollwheel: true});


                            });
                            });
                            }

Answer 1

You need to create and use the MarkerImage class for the icon and shadow and then swap them with an enlarged version during your event using the markers setIcon and setShadow methods. The enlarged MarkerImage class needs to use the scaledSize property. This will stretch the image to the size of your MarkerImage size property

Here is a fiddle example of this in action: check

var shadow = new google.maps.MarkerImage(
  beachflagShadowUrl,
  // The shadow image is larger in the horizontal dimension
  // while the position and offset are the same as for the main image.
  new google.maps.Size(37, 32),
  new google.maps.Point(0,0),
  new google.maps.Point(0, 32));

or check this

 chst=d_map_pin_icon[_withshadow]
 chld=<icon_string>|<fill_color>

seethis