This example uses a data layer to dynamically change the appearance of some KML feature objects when the user hovers over or clicks them.
Read the documentation.
TypeScript
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// Load GeoJSON.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json"
);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle((feature) => {
let color = "gray";
if (feature.getProperty("isColorful")) {
color = feature.getProperty("color");
}
return /** @type {!google.maps.Data.StyleOptions} */ {
fillColor: color,
strokeColor: color,
strokeWeight: 2,
};
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener("click", (event) => {
event.feature.setProperty("isColorful", true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener("mouseover", (event) => {
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
});
map.data.addListener("mouseout", (event) => {
map.data.revertStyle();
});
}
JavaScript
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// Load GeoJSON.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json"
);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle((feature) => {
let color = "gray";
if (feature.getProperty("isColorful")) {
color = feature.getProperty("color");
}
return /** @type {!google.maps.Data.StyleOptions} */ {
fillColor: color,
strokeColor: color,
strokeWeight: 2,
};
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener("click", (event) => {
event.feature.setProperty("isColorful", true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener("mouseover", (event) => {
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
});
map.data.addListener("mouseout", (event) => {
map.data.revertStyle();
});
}
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
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Dynamic Styling</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
All
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Dynamic Styling</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<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>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// Load GeoJSON.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json"
);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle((feature) => {
let color = "gray";
if (feature.getProperty("isColorful")) {
color = feature.getProperty("color");
}
return /** @type {!google.maps.Data.StyleOptions} */ {
fillColor: color,
strokeColor: color,
strokeWeight: 2,
};
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener("click", (event) => {
event.feature.setProperty("isColorful", true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener("mouseover", (event) => {
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
});
map.data.addListener("mouseout", (event) => {
map.data.revertStyle();
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// Load GeoJSON.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json"
);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle((feature) => {
let color = "gray";
if (feature.getProperty("isColorful")) {
color = feature.getProperty("color");
}
return /** @type {!google.maps.Data.StyleOptions} */ {
fillColor: color,
strokeColor: color,
strokeWeight: 2,
};
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener("click", (event) => {
event.feature.setProperty("isColorful", true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener("mouseover", (event) => {
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
});
map.data.addListener("mouseout", (event) => {
map.data.revertStyle();
});
}
/* 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;
}
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Dynamic Styling</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
defer
></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
Create a starter application from sample
A skeleton starter application using TypeScript, Webpack, and Babel can be generated from this sample using one of the methods below.
Run Locally
Node.js is required to run this sample locally. Follow these instructions to install Node.js and NPM.
npx @googlemaps/js-samples init layer-data-dynamic DESTINATION_FOLDER
Run in Google Cloud Shell
Google Cloud Shell is an interactive shell environment for Google Cloud Platform that makes it easy for you to learn and experiment with GCP and manage your projects and resources from your web browser.
Run in Cloud Shell