JSFiddle - React, Tailwind, and code Playground
HTML
<script src='http://maps.google.com/maps/api/js?sensor=false'> </script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js'></script>
<div id="map"/>
CSS
#map {
position: relative;
top: 0px;
left: 0px;
width: 1500px;
height: 850px;
border: 1px solid #999;
z-index: 100;
}
JavaScript
function initialize() {
var customStyle = 'custom_style';
var styleOpts = [{
stylers: [{
hue: '#000089'
}, {
visibility: 'simplified'
}, {
gamma: 0.5
}, {
weight: 0.5
}]
}, {
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}, {
featureType: 'water',
stylers: [{
color: '#ffffff'
}]
}];
var customMapType = new google.maps.StyledMapType(styleOpts);
var mapOptions = {
panControl: false,
zoomControl: false,
scaleControl: false,
center: new google.maps.LatLng(1, 104),
zoom: 2,
minZoom: 2,
maxZoom: 6,
mapTypeId: '' //satellite, roadmap, hybrid, terrain
};
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',
strokeWeight: '0'
}
}, {
where: "ISO_2DIGIT IN ('CN','IN','SG','AU','ID','MY','PG','TH')",
polygonOptions: {
fillColor: '#000000',
fillOpacity: '1',
strokeOpacity: '0',
strokeWeight: '0'
}
}, {
where: "ISO_2DIGIT IN ('LT')",
polygonOptions: {
fillColor: '#FFFFFF',
fillOpacity: '1',
strokeOpacity: '0',
strokeWeight: '0'
}
}, {
where: "ISO_2DIGIT IN ('RU')",
polygonOptions: {
fillColor: '#FF0000',
fillOpacity: '1',
...