Data Layer (no green)
by Stefano
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="height: 100%; min-height: 800px;"></div>
<div id="result"></div>
JavaScript
function styleMap() {
map.data.setStyle(function(feature) {
//default colors
var fillColor = 'gray';
var strokeColor = 'black';
//if the color property of the feature is defined set as style
if (feature.getProperty('color')) {
fillColor = feature.getProperty('color');
strokeColor = fillColor;
}
return ({
fillColor: fillColor,
fillOpacity: 0.4,
strokeColor: strokeColor,
strokeWeight: 1
});
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeWeight: 4
});
}.bind(this));
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
}.bind(this));
}
//init map
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(41, 12),
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 6
});
//add the contour to the map
map.data.addGeoJson(isobands());
//set styles to the contour map
styleMap();
function isobands() {
return {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[ 8, 37.37212395027692 ] , [ 8.721387814916994, 37 ] , [ 8, 37 ] , [ 8, 37.37212395027692 ] ],
[
[ 10.492192461175973, 37.35243489055411 ] , [ 10.137667015350972, 37.67175787668657 ] , [ 10.492192461175973, 37.89480670039064 ] , [ 10.772389677452312, 37.67175787668657 ] , [ 10.492192461175973, 37.35243489055411 ] ],
[
[ 8.156146148968581, 38.34351575337313 ] , [ 8, 38.08088359838805 ] , [ 8, 38.34351575337313 ] , [...