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);