Google Maps and Fusion Tables Layer Without Drop Shadow

Question

I have a Google map set up with a Fusion Table that will highlight only countries that are not APAC.

You can see that the code is working here: http://russellbits.com/labs/hiex-map/google-fusion-table-simple.html

Bonus points go to anyone who can make it work in JSFiddle. It is the identical code to my web page, but I cannot make it work. http://jsfiddle.net/ruzel/KTg6P/

Here's the code from the web site:

function initialize() {

    var mapOptions = {
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        center: new google.maps.LatLng(1, 104),
        zoom: 2,
        mapTypeId: 'roadmap'
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
        },
        styles: [{
            polygonOptions: {
                fillColor: '#cfe1f4',
                strokeColor: '#cfe1f4',
                strokeOpacity: '0'
            }
        }, {
            where: "ISO_2DIGIT IN ('CN','IN','SG','AU','ID','MY','PG','TH')",
            polygonOptions: {
                fillColor: '#000000',
                fillOpacity: '0',
                strokeOpacity: '0'
            }
        }],
        map: map
    });
    layer.setMap(map);

    map.mapTypes.set(customMapType);

}

$().ready(function() {
    initialize();
});

But here's the big question. There are drop shadows on the polygons that are outlining the countries. I have put polygons on Google maps before and a drop shadow is not something that is on by default. I have searched through the API for any drop shadow variables and cannot find one. So I'm not even sure why this drop shadow is there. Perhaps there is a layer variable?

Answer 1

Here is your fiddle map sample working:

http://jsfiddle.net/helmutgranda/vbjXR/

some of the things were missing are here:

<script src='http://maps.google.com/maps/api/js?sensor=false'> </script>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<div id="map"/>

In regards to dropshadow, I have to believe there is a setting somewhere that allows you to turn it on and off, altho Google offers rendering of KML without the dropshadow. If it is that important to you, you may be able to take a stab at it with KML (see sample here):

http://gmaps-samples-v3.googlecode.com/svn/trunk/layers/layers.html

Interesting enough, I just ran into the following sample which may answer your question:

https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles