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 Visualization: Mapping Earthquakes

  • This tutorial demonstrates how to visualize earthquake data on Google Maps using markers, circles, and heatmaps.

  • Real-time earthquake data from the USGS is used, fetched using JSONP and displayed on a terrain map.

  • Customization options include adjusting circle sizes based on earthquake magnitude to highlight stronger events.

  • Heatmaps provide a visual representation of earthquake density, with color intensity indicating areas of high activity.

  • Code samples in TypeScript, JavaScript, CSS, and HTML are provided to guide users through implementation.

Overview

This tutorial shows you how to visualize data on Google maps. As an example, the maps in this tutorial visualize data about the location and magnitude of earthquakes. Learn techniques to use with your own data source, and create powerful stories on Google maps like the ones below.

The frame on the left displays a map with basic markers, and the frame on the right displays a map with sized circles.

Import your data

This tutorial uses real-time earthquake data from the United States Geological Survey (USGS). The USGS website provides their data in a number of formats, which you can copy to your domain for local access by your application. This tutorial requests JSONP directly from the USGS servers by appending a script tag to the head of the document.

// Create a script tag and set the USGS URL as the source.
varscript=document.createElement('script');
script.src='http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Place basic markers

Now that you have pulled data about the location of earthquakes from the USGS feed into your application, you can display it on the map. This section shows you how to create a map that uses imported data to place a basic marker at the epicenter of every earthquake location.

[フレーム]

The section below displays the entire code you need to create the map in this tutorial.

TypeScript

letmap:google.maps.Map;
functioninitMap():void{
map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{
zoom:2,
center:newgoogle.maps.LatLng(2.8,-187.3),
mapTypeId:"terrain",
});
// Create a <script> tag and set the USGS URL as the source.
constscript=document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src=
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
consteqfeed_callback=function(results:any){
for(leti=0;i < results.features.length;i++){
constcoords=results.features[i].geometry.coordinates;
constlatLng=newgoogle.maps.LatLng(coords[1],coords[0]);
newgoogle.maps.Marker({
position:latLng,
map:map,
});
}
};
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"),{
zoom:2,
center:newgoogle.maps.LatLng(2.8,-187.3),
mapTypeId:"terrain",
});
// Create a <script> tag and set the USGS URL as the source.
constscript=document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src=
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
consteqfeed_callback=function(results){
for(leti=0;i < results.features.length;i++){
constcoords=results.features[i].geometry.coordinates;
constlatLng=newgoogle.maps.LatLng(coords[1],coords[0]);
newgoogle.maps.Marker({
position:latLng,
map:map,
});
}
};
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>Earthquake Markers</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>

Use shapes to customize maps

This section shows you another way to customize rich datasets on a map. Consider the map created in the previous section of this tutorial, which shows markers on every earthquake location. You can customize the markers to visualize additional data, like magnitude or depth.

The map below displays customized markers using circle symbol icons. The size of each circle increases with the magnitude of the earthquake it represents.

[フレーム]

The section below displays the entire code you need to create a map with customized circle markers.

TypeScript

letmap:google.maps.Map;
functioninitMap():void{
map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{
zoom:2,
center:{lat:-33.865427,lng:151.196123},
mapTypeId:"terrain",
});
// Create a <script> tag and set the USGS URL as the source.
constscript=document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src=
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
map.data.setStyle((feature)=>{
constmagnitude=feature.getProperty("mag")asnumber;
return{
icon:getCircle(magnitude),
};
});
}
functiongetCircle(magnitude:number){
return{
path:google.maps.SymbolPath.CIRCLE,
fillColor:"red",
fillOpacity:0.2,
scale:Math.pow(2,magnitude)/2,
strokeColor:"white",
strokeWeight:0.5,
};
}
functioneqfeed_callback(results:any){
map.data.addGeoJson(results);
}
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"),{
zoom:2,
center:{lat:-33.865427,lng:151.196123},
mapTypeId:"terrain",
});
// Create a <script> tag and set the USGS URL as the source.
constscript=document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src=
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
map.data.setStyle((feature)=>{
constmagnitude=feature.getProperty("mag");
return{
icon:getCircle(magnitude),
};
});
}
functiongetCircle(magnitude){
return{
path:google.maps.SymbolPath.CIRCLE,
fillColor:"red",
fillOpacity:0.2,
scale:Math.pow(2,magnitude)/2,
strokeColor:"white",
strokeWeight:0.5,
};
}
functioneqfeed_callback(results){
map.data.addGeoJson(results);
}
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>Earthquake Circles</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>

More information

Read more about the following topics:

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.