Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Data Layer: Earthquakes

  • 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 the reference documentation for the data layer.

Default style

Default style: map

gre [フレーム]

Default style: code example

TypeScript

letinnerMap:google.maps.Map;
asyncfunctioninit(){
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.php
constscript=document.createElement('script');
script.setAttribute('src','quakes.geo.js');
document.getElementsByTagName('head')[0].appendChild(script);
}
// Defines the callback function referenced in the jsonp file.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
functionearthquakeDataLoad(data:any){
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
innerMap.data.addGeoJson(data);
}
window.earthquakeDataLoad=earthquakeDataLoad;
voidinit();

JavaScript

letinnerMap;
asyncfunctioninit(){
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.php
constscript=document.createElement('script');
script.setAttribute('src','quakes.geo.js');
document.getElementsByTagName('head')[0].appendChild(script);
}
// Defines the callback function referenced in the jsonp file.
functionearthquakeDataLoad(data){
innerMap.data.addGeoJson(data);
}
window.earthquakeDataLoad=earthquakeDataLoad;
voidinit();

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>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map center="20,-160" zoom="3"></gmp-map>
 </body>
</html>

Simple style

Simple style: map

[フレーム]

Simple style: code example

TypeScript

letinnerMap:google.maps.Map;
asyncfunctioninit(){
const[{SymbolPath}]=awaitPromise.all([
google.maps.importLibrary('core'),
google.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.php
constscript=document.createElement('script');
script.setAttribute('src','quakes.geo.js');
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{
icon:{
path:SymbolPath.CIRCLE,
scale:mag,
fillColor:'#f00',
fillOpacity:0.35,
strokeWeight:0,
},
};
});
}
// Defines the callback function referenced in the jsonp file.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
functionearthquakeDataLoad(data:any){
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
innerMap.data.addGeoJson(data);
}
window.earthquakeDataLoad=earthquakeDataLoad;
voidinit();

JavaScript

letinnerMap;
asyncfunctioninit(){
const[{SymbolPath}]=awaitPromise.all([
google.maps.importLibrary('core'),
google.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.php
constscript=document.createElement('script');
script.setAttribute('src','quakes.geo.js');
document.getElementsByTagName('head')[0].appendChild(script);
// Add a basic style.
innerMap.data.setStyle((feature)=>{
constmag=Math.exp(parseFloat(feature.getProperty('mag')))*0.1;
return{
icon:{
path:SymbolPath.CIRCLE,
scale:mag,
fillColor:'#f00',
fillOpacity:0.35,
strokeWeight:0,
},
};
});
}
// Defines the callback function referenced in the jsonp file.
functionearthquakeDataLoad(data){
innerMap.data.addGeoJson(data);
}
window.earthquakeDataLoad=earthquakeDataLoad;
voidinit();

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>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map center="20,-160" zoom="2"></gmp-map>
 </body>
</html>

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.php
constscript=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.0
consthigh=[5,69,54];// color of mag 6.0 and above
constminMag=1.0;
constmaxMag=6.0;
// fraction represents where the value sits between the min and max
letmag=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 nicer
scale: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.php
constscript=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.0
consthigh=[5,69,54];// color of mag 6.0 and above
constminMag=1.0;
constmaxMag=6.0;
// fraction represents where the value sits between the min and max
letmag=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 nicer
scale: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 id="map"></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>

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2026年09月01日 UTC.