D3 Examples - Using geojson with Google Maps API

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Data Layer: Styling</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #legend-container {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 3px solid #000;
      }
      #legend-container h3 {
        margin-top: 0;
      }
      .legend-color-box {
        height:20px;
        width:20px;
        border-radius:3px;
        float:left;
        border:1px solid black;
        margin-right:6px;           
      }
      
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map,
            cachedGeoJson,
            colorValues = [
    
                "red", //1
                "blue", //2
                "green", //3
                "brown", //4
                "purple", //5
                "pink" //6
            ],
            invertedColorValues = [
        
                "pink", //1
                "purple", //2
                "brown", //3
                "green", //4
                "blue", //5
                "red"//6         
            ],
            infoWindow = new google.maps.InfoWindow({
              content: ""
            });
​
        google.maps.event.addDomListener(window, 'load', function initialize() {
            //create the map
            map = new google.maps.Map(document.getElementById('map-canvas'), {
              zoom: 6,
              center: {lat: 37.5, lng: -119.0},
              scrollwheel: false
            });
            
            // Load GeoJSON.
            var promise = $.getJSON("california_nad83_zones_min.geojson"); //same as map.data.loadGeoJson();
            promise.then(function(data){
                cachedGeoJson = data; //save the geojson in case we want to update its values
                map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});  
            });
        
            //style fucntions
            var setColorStyleFn = function(feature) {
                return {
                      fillColor: colorValues[feature.getProperty('value')],
                      strokeWeight: 1
                    };
                },
                //an inverted style fn
                setInvertedColorStyleFn = function(feature) {
                    return {
                      fillColor: invertedColorValues[feature.getProperty('value')],
                      strokeWeight: 1
                    };
                };
            
            // Set the stroke width, and fill color for each polygon, with default colors at first
            map.data.setStyle(setColorStyleFn);
                    
            //get the legend container, create a legend, add a legend renderer fn
            var $legendContainer = $('#legend-container'),
                $legend = $('<div id="legend">').appendTo($legendContainer),
                renderLegend = function(colorValuesArray){
                    $legend.empty();
                    $.each(colorValuesArray,function(index, val){
                        var $div = $('<div style="height:25px;">').append($('<div class="legend-color-box">').css({
                            backgroundColor:val,
                        })).append($("<span>").css("lineHeight","23px").html("Zone " + index));
                          
                        $legend.append($div);
                    }); 
                }
            
            //make a legend for the first time
            renderLegend(colorValues);
            
            //make a toggle button for color values
            var $toggleColorsButton = $("<button>").html("Toggle Colors").click(function(){
                if(map.data.getStyle() === setColorStyleFn){
                    map.data.setStyle(setInvertedColorStyleFn);
                    renderLegend(invertedColorValues);
                } else {
                    map.data.setStyle(setColorStyleFn);
                    renderLegend(colorValues);
                }
            });
            
            //add it to the legend
            $legendContainer.append($toggleColorsButton);
            
            //add the legend to the map
            map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($legendContainer[0]);
         
            //listen for click events
            map.data.addListener('click', function(event) {
                //show an infowindow on click   
                infoWindow.setContent('<div style="line-height:1.35;overflow:hidden;white-space:nowrap;"> Feature id = '+
                                            event.feature.getId() +"<br/>Feature Value = Zone " + event.feature.getProperty("value") + "</div>");
                var anchor = new google.maps.MVCObject();
                anchor.set("position",event.latLng);
                infoWindow.open(map,anchor);
            });
        });
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="legend-container"><h3>Legend</h3></div>
  </body>
</html>
​
    