var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: 41, lng: -96}
});
// Load GeoJSON.
map.data.loadGeoJson('US_state_geo.JSON');
// Color each letter green. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'green';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 1
});
});
// When the user clicks, set 'isColorful', changing the color of the states.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the state.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 4});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
//
}
google.maps.event.addDomListener(window, 'load', initialize);
- Change scale and size of map
- Change initial color of polygons
Changing colors of polygons defined in geoJSON
Once the geoJSON is opened, all polygons are set to green. Clicking on the polygon reverts to the original.