Google Maps Marker Shadow not being displayed

Question

So in wordpress have a set of images that pull in, but i want to add a png that will act as a shadow on them. It currently is not adding the shadow to my markers.

Here is my code below. Does anyone see the bug? Maps work fine its just now adding shadows

<?php
get_header();
get_template_part('ts-themes/whatspecies/header-whatspecies');
?>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
jQuery(document).ready(function () {
var LocationData = [
    <?php

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 200
    );

    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) :
        $a=0;
        while ( $the_query->have_posts() ) : $the_query->the_post();
            $location = get_post_meta(get_the_id(),'location',true);
            if(!empty($location)){
                $lat = $location['map_lat'];
                $long = $location['map_long'];
                $cat =get_the_category( get_the_ID() );
                $icon = site_url().'/wp-content/themes/themesmith/ts-themes/whatspecies/icons/map/'.$cat[0]->category_nicename.'.png';

                echo '['.$lat.','.$long.',"<a href='.get_permalink().'>'.get_the_title().'</a>","'.$icon.'"],';
            }

        endwhile;
        wp_reset_query();
    endif;
    ?>
];
var map =
new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var shadow = {
        url: 'http://whatspecies.beresponsive.net/wp-content/themes/themesmith/ts-themes/whatspecies/icons/map/marker-shadow.png',
         size: new google.maps.Size(64, 64),
         origin: new google.maps.Point(0,0),
         anchor: new google.maps.Point(0, 64)

    };
for (var i in LocationData)
{
    var p = LocationData[i];
    var latlng = new google.maps.LatLng(p[0], p[1]);
    bounds.extend(latlng);


    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon:p[3],
        title: p[2],
        shadow: shadow
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.title);
        infowindow.open(map, this);
    });
}

map.fitBounds(bounds);
});
</script>


<div class="body clearfix">
<div class="entries full-template">
    <div class="entry-holder entry-map page-holder">
        <div class="title">
            <h1>
                <span>Observations map</span>
            </h1>
            <div class="meta"></div>
        </div>
        <div class="content">
            <div class="the-content">
                    <div id="map-canvas"></div>
            </div>
        </div>
    </div>
</div>
</div>

<?php get_template_part('ts-themes/whatspecies/footer-whatspecies') ?>

<?php get_footer();

Answer 1

Marker shadows are no longer supported in version 3.14 of the Google Maps JavaScript API.

The following is from https://developers.google.com/maps/documentation/javascript/markers:

Note: Marker shadows were removed in version 3.14 of the Google Maps JavaScript API. Any shadows specified programmatically will be ignored.