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>