Using geojson with Google Maps API

<!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>

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false