Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.
Data Layer: Earthquakes
Page Summary
This webpage showcases three distinct presentation styles for visualizing earthquake data from the USGS recent earthquakes feed on a Google Map.
The styles range from a default presentation to a simple style with red circles indicating earthquake locations, and finally, an advanced style with customized colors and sizes based on earthquake magnitude.
Code examples in TypeScript and JavaScript are provided for each style, demonstrating how to fetch earthquake data, apply styling to the data layer, and integrate it with the Google Maps API.
Each style includes HTML, CSS, and JavaScript/TypeScript code snippets for implementation, and links to live samples on JSFiddle and Google Cloud Shell are provided for interactive exploration.
This example creates three different presentation styles for a dataset from the USGS recent earthquakes feed.
Check out thereference documentation for the data layer.
Default style
Default style: map
greDefault style: code example
TypeScript
letinnerMap;letearthquakeData;asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'))asgoogle.maps.MapsLibrary;constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;innerMap=mapElement.innerMap;// Get the earthquake data (JSONP format)// This feed is a copy from the USGS feed, you can find the originals here:// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.phpconstscript=document.createElement('script');script.setAttribute('src','quakes.geo.json');document.getElementsByTagName('head')[0].appendChild(script);}// Defines the callback function referenced in the jsonp file.functioneqfeed_callback(data:any){innerMap.data.addGeoJson(data);}window.eqfeed_callback=eqfeed_callback;initMap();
JavaScript
letinnerMap;letearthquakeData;asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'));constmapElement=document.querySelector('gmp-map');innerMap=mapElement.innerMap;// Get the earthquake data (JSONP format)// This feed is a copy from the USGS feed, you can find the originals here:// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.phpconstscript=document.createElement('script');script.setAttribute('src','quakes.geo.json');document.getElementsByTagName('head')[0].appendChild(script);}// Defines the callback function referenced in the jsonp file.functioneqfeed_callback(data){innerMap.data.addGeoJson(data);}window.eqfeed_callback=eqfeed_callback;initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */gmp-map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}
HTML
<html> <head> <title>Default Data Layer: Earthquakes</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </head> <body> <gmp-map center="20,-160" zoom="3"></gmp-map> </body></html>Try Sample
Simple style
Simple style: map
Simple style: code example
TypeScript
letinnerMap;asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'))asgoogle.maps.MapsLibrary;constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;innerMap=mapElement.innerMap;// Get the earthquake data (JSONP format)// This feed is a copy from the USGS feed, you can find the originals here:// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.phpconstscript=document.createElement('script');script.setAttribute('src','quakes.geo.json');document.getElementsByTagName('head')[0].appendChild(script);// Add a basic style.innerMap.data.setStyle((feature)=>{constmag=Math.exp(parseFloat(feature.getProperty('mag')asstring))*0.1;return/** @type {google.maps.Data.StyleOptions} */{icon:{path:google.maps.SymbolPath.CIRCLE,scale:mag,fillColor:'#f00',fillOpacity:0.35,strokeWeight:0,},};});}// Defines the callback function referenced in the jsonp file.functioneqfeed_callback(data:any){innerMap.data.addGeoJson(data);}window.eqfeed_callback=eqfeed_callback;initMap();
JavaScript
letinnerMap;asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'));constmapElement=document.querySelector('gmp-map');innerMap=mapElement.innerMap;// Get the earthquake data (JSONP format)// This feed is a copy from the USGS feed, you can find the originals here:// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.phpconstscript=document.createElement('script');script.setAttribute('src','quakes.geo.json');document.getElementsByTagName('head')[0].appendChild(script);// Add a basic style.innerMap.data.setStyle((feature)=>{constmag=Math.exp(parseFloat(feature.getProperty('mag')))*0.1;return/** @type {google.maps.Data.StyleOptions} */{icon:{path:google.maps.SymbolPath.CIRCLE,scale:mag,fillColor:'#f00',fillOpacity:0.35,strokeWeight:0,},};});}// Defines the callback function referenced in the jsonp file.functioneqfeed_callback(data){innerMap.data.addGeoJson(data);}window.eqfeed_callback=eqfeed_callback;initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */gmp-map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}
HTML
<html> <head> <title>Simple Data Layer: Earthquakes</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </head> <body> <gmp-map center="20,-160" zoom="2"></gmp-map> </body></html>Try Sample
Advanced style
Advanced style: map
Advanced style: code example
TypeScript
letmap:google.maps.Map;functioninitMap():void{map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:{lat:20,lng:-160},zoom:2,styles:mapStyle,});map.data.setStyle(styleFeature);// Get the earthquake data (JSONP format)// This feed is a copy from the USGS feed, you can find the originals here:// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.phpconstscript=document.createElement("script");script.setAttribute("src","https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json");document.getElementsByTagName("head")[0].appendChild(script);}// Defines the callback function referenced in the jsonp file.functioneqfeed_callback(data:any){map.data.addGeoJson(data);}functionstyleFeature(feature:google.maps.Data.Feature){constlow=[151,83,34];// color of mag 1.0consthigh=[5,69,54];// color of mag 6.0 and aboveconstminMag=1.0;constmaxMag=6.0;// fraction represents where the value sits between the min and maxletmag=feature.getProperty("mag")asnumber;constfraction=(Math.min(mag,maxMag)-minMag)/(maxMag-minMag);constcolor=interpolateHsl(low,high,fraction);return{icon:{path:google.maps.SymbolPath.CIRCLE,strokeWeight:0.5,strokeColor:"#fff",fillColor:color,fillOpacity:2/mag,// while an exponent would technically be correct, quadratic looks nicerscale:Math.pow(mag,2),},zIndex:Math.floor(mag),};}functioninterpolateHsl(lowHsl:number[],highHsl:number[],fraction:number){constcolor:number[]=[];for(leti=0;i <3;i++){// Calculate color based on the fraction.color.push((highHsl[i]-lowHsl[i])*fraction+lowHsl[i]);}return"hsl("+color[0]+","+color[1]+"%,"+color[2]+"%)";}constmapStyle:google.maps.MapTypeStyle[]=[{featureType:"all",elementType:"all",stylers:[{visibility:"off"}],},{featureType:"landscape",elementType:"geometry",stylers:[{visibility:"on"},{color:"#fcfcfc"}],},{featureType:"water",elementType:"labels",stylers:[{visibility:"off"}],},{featureType:"water",elementType:"geometry",stylers:[{visibility:"on"},{hue:"#5f94ff"},{lightness:60}],},];declareglobal{interfaceWindow{initMap:()=>void;eqfeed_callback:(results:any)=>void;}}window.initMap=initMap;window.eqfeed_callback=eqfeed_callback;
JavaScript
letmap;functioninitMap(){map=newgoogle.maps.Map(document.getElementById("map"),{center:{lat:20,lng:-160},zoom:2,styles:mapStyle,});map.data.setStyle(styleFeature);// Get the earthquake data (JSONP format)// This feed is a copy from the USGS feed, you can find the originals here:// http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.phpconstscript=document.createElement("script");script.setAttribute("src","https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json",);document.getElementsByTagName("head")[0].appendChild(script);}// Defines the callback function referenced in the jsonp file.functioneqfeed_callback(data){map.data.addGeoJson(data);}functionstyleFeature(feature){constlow=[151,83,34];// color of mag 1.0consthigh=[5,69,54];// color of mag 6.0 and aboveconstminMag=1.0;constmaxMag=6.0;// fraction represents where the value sits between the min and maxletmag=feature.getProperty("mag");constfraction=(Math.min(mag,maxMag)-minMag)/(maxMag-minMag);constcolor=interpolateHsl(low,high,fraction);return{icon:{path:google.maps.SymbolPath.CIRCLE,strokeWeight:0.5,strokeColor:"#fff",fillColor:color,fillOpacity:2/mag,// while an exponent would technically be correct, quadratic looks nicerscale:Math.pow(mag,2),},zIndex:Math.floor(mag),};}functioninterpolateHsl(lowHsl,highHsl,fraction){constcolor=[];for(leti=0;i <3;i++){// Calculate color based on the fraction.color.push((highHsl[i]-lowHsl[i])*fraction+lowHsl[i]);}return"hsl("+color[0]+","+color[1]+"%,"+color[2]+"%)";}constmapStyle=[{featureType:"all",elementType:"all",stylers:[{visibility:"off"}],},{featureType:"landscape",elementType:"geometry",stylers:[{visibility:"on"},{color:"#fcfcfc"}],},{featureType:"water",elementType:"labels",stylers:[{visibility:"off"}],},{featureType:"water",elementType:"geometry",stylers:[{visibility:"on"},{hue:"#5f94ff"},{lightness:60}],},];window.initMap=initMap;window.eqfeed_callback=eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */#map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}
HTML
<html> <head> <title>Advanced Data Layer: Earthquakes</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <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>
Try Sample
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-12-18 UTC.