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.
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
Default style
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 20, lng: -160 }, zoom: 2 }); // 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 var script = 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. function eqfeed_callback(data) { map.data.addGeoJson(data); }
<div id="map"></div>
/* 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; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!DOCTYPE html>
<html>
<head>
<title>Default Data Layer: Earthquakes</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0" />
<style type="text/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;
}
</style>
</head>
<body id="map-container">
<div id="map"></div>
<script>
// [START script-body]
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 20, lng: -160 },
zoom: 2
});
// 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
var script = 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.
function eqfeed_callback(data) {
map.data.addGeoJson(data);
}
// [END script-body]
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
Simple style
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 20, lng: -160 }, zoom: 2 }); // 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 var script = document.createElement('script'); script.setAttribute( 'src', 'https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json'); document.getElementsByTagName('head')[0].appendChild(script); // Add a basic style. map.data.setStyle(function(feature) { var mag = 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. function eqfeed_callback(data) { map.data.addGeoJson(data); }
<div id="map"></div>
/* 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; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!DOCTYPE html>
<html>
<head>
<title>Simple Data Layer: Earthquakes</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0" />
<style type="text/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;
}
</style>
</head>
<body id="map-container">
<div id="map"></div>
<script>
// [START script-body]
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 20, lng: -160 },
zoom: 2
});
// 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
var script = document.createElement('script');
script.setAttribute(
'src',
'https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json');
document.getElementsByTagName('head')[0].appendChild(script);
// Add a basic style.
map.data.setStyle(function(feature) {
var mag = 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.
function eqfeed_callback(data) {
map.data.addGeoJson(data);
}
// [END script-body]
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
Advanced style
var map; function initMap() { map = new google.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 var script = 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. function eqfeed_callback(data) { map.data.addGeoJson(data); } function styleFeature(feature) { var low = [151, 83, 34]; // color of mag 1.0 var high = [5, 69, 54]; // color of mag 6.0 and above var minMag = 1.0; var maxMag = 6.0; // fraction represents where the value sits between the min and max var fraction = (Math.min(feature.getProperty('mag'), maxMag) - minMag) / (maxMag - minMag); var color = interpolateHsl(low, high, fraction); return { icon: { path: google.maps.SymbolPath.CIRCLE, strokeWeight: 0.5, strokeColor: '#fff', fillColor: color, fillOpacity: 2 / feature.getProperty('mag'), // while an exponent would technically be correct, quadratic looks nicer scale: Math.pow(feature.getProperty('mag'), 2) }, zIndex: Math.floor(feature.getProperty('mag')) }; } function interpolateHsl(lowHsl, highHsl, fraction) { var color = []; for (var i = 0; i < 3; i++) { // Calculate color based on the fraction. color[i] = (highHsl[i] - lowHsl[i]) * fraction + lowHsl[i]; } return 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)'; } var mapStyle = [{ '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}] }];
<div id="map"></div>
/* 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; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!DOCTYPE html>
<html>
<head>
<title>Advanced Data Layer: Earthquakes</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0" />
<style type="text/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;
}
</style>
</head>
<body id="map-container">
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.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
var script = 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.
function eqfeed_callback(data) {
map.data.addGeoJson(data);
}
function styleFeature(feature) {
var low = [151, 83, 34]; // color of mag 1.0
var high = [5, 69, 54]; // color of mag 6.0 and above
var minMag = 1.0;
var maxMag = 6.0;
// fraction represents where the value sits between the min and max
var fraction = (Math.min(feature.getProperty('mag'), maxMag) - minMag) /
(maxMag - minMag);
var color = interpolateHsl(low, high, fraction);
return {
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeWeight: 0.5,
strokeColor: '#fff',
fillColor: color,
fillOpacity: 2 / feature.getProperty('mag'),
// while an exponent would technically be correct, quadratic looks nicer
scale: Math.pow(feature.getProperty('mag'), 2)
},
zIndex: Math.floor(feature.getProperty('mag'))
};
}
function interpolateHsl(lowHsl, highHsl, fraction) {
var color = [];
for (var i = 0; i < 3; i++) {
// Calculate color based on the fraction.
color[i] = (highHsl[i] - lowHsl[i]) * fraction + lowHsl[i];
}
return 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)';
}
var mapStyle = [{
'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}]
}];
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>