constmapStyle:google.maps.MapTypeStyle[]=[{stylers:[{visibility:"off"}],},{featureType:"landscape",elementType:"geometry",stylers:[{visibility:"on"},{color:"#fcfcfc"}],},{featureType:"water",elementType:"geometry",stylers:[{visibility:"on"},{color:"#bfd4ff"}],},];letmap:google.maps.Map;letcensusMin=Number.MAX_VALUE,censusMax=-Number.MAX_VALUE;functioninitMap():void{// load the mapmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:{lat:40,lng:-100},zoom:4,styles:mapStyle,});// set up the style rules and events for google.maps.Datamap.data.setStyle(styleFeature);map.data.addListener("mouseover",mouseInToRegion);map.data.addListener("mouseout",mouseOutOfRegion);// wire up the buttonconstselectBox=document.getElementById("census-variable")asHTMLSelectElement;google.maps.event.addDomListener(selectBox,"change",()=>{clearCensusData();loadCensusData(selectBox.options[selectBox.selectedIndex].value);});// state polygons only need to be loaded once, do them nowloadMapShapes();}/** Loads the state boundary polygons from a GeoJSON source. */functionloadMapShapes(){// load US state outline polygons from a GeoJson filemap.data.loadGeoJson("https://storage.googleapis.com/mapsdevsite/json/states.js",{idPropertyName:"STATE"});// wait for the request to complete by listening for the first feature to be// addedgoogle.maps.event.addListenerOnce(map.data,"addfeature",()=>{google.maps.event.trigger(document.getElementById("census-variable")asHTMLElement,"change");});}/** * Loads the census data from a simulated API call to the US Census API. * * @param {string} variable */functionloadCensusData(variable:string){// load the requested variable from the census API (using local copies)constxhr=newXMLHttpRequest();xhr.open("GET",variable+".json");xhr.onload=function(){constcensusData=JSON.parse(xhr.responseText)asany;censusData.shift();// the first row contains column namescensusData.forEach((row:string)=>{constcensusVariable=parseFloat(row[0]);conststateId=row[1];// keep track of min and max valuesif(censusVariable <censusMin){censusMin=censusVariable;}if(censusVariable >censusMax){censusMax=censusVariable;}conststate=map.data.getFeatureById(stateId);// update the existing row with the new dataif(state){state.setProperty("census_variable",censusVariable);}});// update and display the legend(document.getElementById("census-min")asHTMLElement).textContent=censusMin.toLocaleString();(document.getElementById("census-max")asHTMLElement).textContent=censusMax.toLocaleString();};xhr.send();}/** Removes census data from each shape on the map and resets the UI. */functionclearCensusData(){censusMin=Number.MAX_VALUE;censusMax=-Number.MAX_VALUE;map.data.forEach((row)=>{row.setProperty("census_variable",undefined);});(document.getElementById("data-box")asHTMLElement).style.display="none";(document.getElementById("data-caret")asHTMLElement).style.display="none";}/** * Applies a gradient style based on the 'census_variable' column. * This is the callback passed to data.setStyle() and is called for each row in * the data set.  Check out the docs for Data.StylingFunction. * * @param {google.maps.Data.Feature} feature */functionstyleFeature(feature:google.maps.Data.Feature){constlow=[5,69,54];// color of smallest datumconsthigh=[151,83,34];// color of largest datumletcensusVariable=feature.getProperty("census_variable")asnumber;// delta represents where the value sits between the min and maxconstdelta=(censusVariable-censusMin)/(censusMax-censusMin);constcolor:number[]=[];for(leti=0;i <3;i++){// calculate an integer color based on the deltacolor.push((high[i]-low[i])*delta+low[i]);}// determine whether to show this shape or notletshowRow=true;if(censusVariable==null||isNaN(censusVariable)){showRow=false;}letoutlineWeight=0.5,zIndex=1;if(feature.getProperty("state")==="hover"){outlineWeight=zIndex=2;}return{strokeWeight:outlineWeight,strokeColor:"#fff",zIndex:zIndex,fillColor:"hsl("+color[0]+","+color[1]+"%,"+color[2]+"%)",fillOpacity:0.75,visible:showRow,};}/** * Responds to the mouse-in event on a map shape (state). * * @param {?google.maps.MapMouseEvent} e */functionmouseInToRegion(e:any){// set the hover state so the setStyle function can change the bordere.feature.setProperty("state","hover");constpercent=((e.feature.getProperty("census_variable")-censusMin)/(censusMax-censusMin))*100;// update the label(document.getElementById("data-label")asHTMLElement).textContent=e.feature.getProperty("NAME");(document.getElementById("data-value")asHTMLElement).textContent=e.feature.getProperty("census_variable").toLocaleString();(document.getElementById("data-box")asHTMLElement).style.display="block";(document.getElementById("data-caret")asHTMLElement).style.display="block";(document.getElementById("data-caret")asHTMLElement).style.paddingLeft=percent+"%";}/** * Responds to the mouse-out event on a map shape (state). * */functionmouseOutOfRegion(e:any){// reset the hover state, returning the border to normale.feature.setProperty("state","normal");}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
index.ts

constmapStyle=[{stylers:[{visibility:"off"}],},{featureType:"landscape",elementType:"geometry",stylers:[{visibility:"on"},{color:"#fcfcfc"}],},{featureType:"water",elementType:"geometry",stylers:[{visibility:"on"},{color:"#bfd4ff"}],},];letmap;letcensusMin=Number.MAX_VALUE,censusMax=-Number.MAX_VALUE;functioninitMap(){// load the mapmap=newgoogle.maps.Map(document.getElementById("map"),{center:{lat:40,lng:-100},zoom:4,styles:mapStyle,});// set up the style rules and events for google.maps.Datamap.data.setStyle(styleFeature);map.data.addListener("mouseover",mouseInToRegion);map.data.addListener("mouseout",mouseOutOfRegion);// wire up the buttonconstselectBox=document.getElementById("census-variable");google.maps.event.addDomListener(selectBox,"change",()=>{clearCensusData();loadCensusData(selectBox.options[selectBox.selectedIndex].value);});// state polygons only need to be loaded once, do them nowloadMapShapes();}/** Loads the state boundary polygons from a GeoJSON source. */functionloadMapShapes(){// load US state outline polygons from a GeoJson filemap.data.loadGeoJson("https://storage.googleapis.com/mapsdevsite/json/states.js",{idPropertyName:"STATE"},);// wait for the request to complete by listening for the first feature to be// addedgoogle.maps.event.addListenerOnce(map.data,"addfeature",()=>{google.maps.event.trigger(document.getElementById("census-variable"),"change",);});}/** * Loads the census data from a simulated API call to the US Census API. * * @param {string} variable */functionloadCensusData(variable){// load the requested variable from the census API (using local copies)constxhr=newXMLHttpRequest();xhr.open("GET",variable+".json");xhr.onload=function(){constcensusData=JSON.parse(xhr.responseText);censusData.shift();// the first row contains column namescensusData.forEach((row)=>{constcensusVariable=parseFloat(row[0]);conststateId=row[1];// keep track of min and max valuesif(censusVariable <censusMin){censusMin=censusVariable;}if(censusVariable >censusMax){censusMax=censusVariable;}conststate=map.data.getFeatureById(stateId);// update the existing row with the new dataif(state){state.setProperty("census_variable",censusVariable);}});// update and display the legenddocument.getElementById("census-min").textContent=censusMin.toLocaleString();document.getElementById("census-max").textContent=censusMax.toLocaleString();};xhr.send();}/** Removes census data from each shape on the map and resets the UI. */functionclearCensusData(){censusMin=Number.MAX_VALUE;censusMax=-Number.MAX_VALUE;map.data.forEach((row)=>{row.setProperty("census_variable",undefined);});document.getElementById("data-box").style.display="none";document.getElementById("data-caret").style.display="none";}/** * Applies a gradient style based on the 'census_variable' column. * This is the callback passed to data.setStyle() and is called for each row in * the data set.  Check out the docs for Data.StylingFunction. * * @param {google.maps.Data.Feature} feature */functionstyleFeature(feature){constlow=[5,69,54];// color of smallest datumconsthigh=[151,83,34];// color of largest datumletcensusVariable=feature.getProperty("census_variable");// delta represents where the value sits between the min and maxconstdelta=(censusVariable-censusMin)/(censusMax-censusMin);constcolor=[];for(leti=0;i <3;i++){// calculate an integer color based on the deltacolor.push((high[i]-low[i])*delta+low[i]);}// determine whether to show this shape or notletshowRow=true;if(censusVariable==null||isNaN(censusVariable)){showRow=false;}letoutlineWeight=0.5,zIndex=1;if(feature.getProperty("state")==="hover"){outlineWeight=zIndex=2;}return{strokeWeight:outlineWeight,strokeColor:"#fff",zIndex:zIndex,fillColor:"hsl("+color[0]+","+color[1]+"%,"+color[2]+"%)",fillOpacity:0.75,visible:showRow,};}/** * Responds to the mouse-in event on a map shape (state). * * @param {?google.maps.MapMouseEvent} e */functionmouseInToRegion(e){// set the hover state so the setStyle function can change the bordere.feature.setProperty("state","hover");constpercent=((e.feature.getProperty("census_variable")-censusMin)/(censusMax-censusMin))*100;// update the labeldocument.getElementById("data-label").textContent=e.feature.getProperty("NAME");document.getElementById("data-value").textContent=e.feature.getProperty("census_variable").toLocaleString();document.getElementById("data-box").style.display="block";document.getElementById("data-caret").style.display="block";document.getElementById("data-caret").style.paddingLeft=percent+"%";}/** * Responds to the mouse-out event on a map shape (state). * */functionmouseOutOfRegion(e){// reset the hover state, returning the border to normale.feature.setProperty("state","normal");}window.initMap=initMap;
index.js

<html>  <head>    <title>Mashups with google.maps.Data</title>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div>      <div>        <select>          <option            value="https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE"          >            Percent of population over 25 that completed high school          </option>          <option            value="https://storage.googleapis.com/mapsdevsite/json/DP05_0017E"          >            Median age          </option>          <option            value="https://storage.googleapis.com/mapsdevsite/json/DP05_0001E"          >            Total population          </option>          <option            value="https://storage.googleapis.com/mapsdevsite/json/DP02_0016E"          >            Average family size          </option>          <option            value="https://storage.googleapis.com/mapsdevsite/json/DP03_0088E"          >            Per-capita income          </option>        </select>      </div>      <div>        <div>min</div>        <div><span>&#x25c6;</span></div>        <div>max</div>      </div>    </div>    <div>      <label for="data-value"></label>      <span></span>    </div>    <div></div>    <!--       The `defer` attribute causes the script to execute after the full HTML      document has been parsed. For non-blocking uses, avoiding race conditions,      and consistent behavior across browsers, consider loading using Promises. See      https://developers.google.com/maps/documentation/javascript/load-maps-js-api      for more information.      -->    <script      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"      defer    ></script>  </body></html>
index.html