Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Add a dataset to a map

  • This documentation explains how to add and style datasets on a Google Map using the Data-driven Styling (DDS) feature.

  • You can style features by applying simple style rules directly or using aFeatureStyleFunction for declarative styling based on dataset attributes.

  • To display your dataset, associate its ID with your map style in the Google Cloud console and add it as a feature layer to your map.

  • When displaying uploaded datasets, ensure proper attribution is included on the map using custom controls or other suitable methods.

  • Styling can be removed from a layer by setting itsstyle property tonull, which can also be achieved within aFeatureStyleFunction for selective feature visibility.

Select platform:AndroidiOSJavaScript

TheFeatureStyleFunction,is where you define logic to selectively style features in a dataset. ItreturnsFeatureStyleOptionsbased on this logic. If styling logic is not required, you can useFeatureStyleOptionsto set styles directly. This page shows you how to add a dataset to a map, andapply styling.

Prerequisites

Before proceeding, you should have a map ID and map style, and a dataset ID.

Associate a dataset ID with a map style

Experimental: This feature can only be set for light map styles. When you link alight map style that has this feature enabled to amapID, the enabled layers are also available for the darkmap style.

Take the following steps to associate your dataset with the map style you'reusing:

  1. In the Google Cloud console,go to theDatasets page.
  2. Click the name of the dataset. TheDataset details page appears.
  3. Click thePreview tab.
  4. Scroll toADD MAP STYLE and click.
    The Associated map styles section with a plus button that says ADD MAP STYLE to the right.
  5. Click the checkbox(es) for the Map Style(s) to associate and then clickSAVE.
Caution: Rendering multiple datasets on a map can affect performance dependingon the size and number of datasets.

Use simple style rules

The simplest way to style features is to pass aFeatureStyleOptions to definestyle attributes such as color, opacity, and line weight. Apply feature styleoptions directly to a dataset feature layer, or use them in conjunction with aFeatureStyleFunction.

TypeScript

conststyleOptions={strokeColor:'green',strokeWeight:2,strokeOpacity:1,fillColor:'green',fillOpacity:0.3,};
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

conststyleOptions={strokeColor:"green",strokeWeight:2,strokeOpacity:1,fillColor:"green",fillOpacity:0.3,};

Use declarative style rules

Use theFeatureStyleFunction to set style rules declaratively, and apply themacross your entire dataset. ApplyFeatureStyleOptions to a feature based ondataset attribute values. You can also returnnull from your feature stylefunction, for example if you want a subset of features to remain invisible. Thisexample shows a style function that colors a set of points based on dataattributes:

TypeScript

functionsetStyle(/* FeatureStyleFunctionOptions */params){// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];// Apply styles. Fill is primary fur color, stroke is secondary fur color.switch(furColors){case'Black+':return/* FeatureStyleOptions */{fillColor:'black',pointRadius:8};break;case'Cinnamon+':return/* FeatureStyleOptions */{fillColor:'#8b0000',pointRadius:8};break;case'Cinnamon+Gray':return/* FeatureStyleOptions */{fillColor:'#8b0000',strokeColor:'gray',pointRadius:6};break;case'Cinnamon+White':return/* FeatureStyleOptions */{fillColor:'#8b0000',strokeColor:'white',pointRadius:6};break;case'Gray+':return/* FeatureStyleOptions */{fillColor:'gray',pointRadius:8};break;case'Gray+Cinnamon':return/* FeatureStyleOptions */{fillColor:'gray',strokeColor:'#8b0000',pointRadius:6};break;case'Gray+Cinnamon, White':return/* FeatureStyleOptions */{fillColor:'silver',strokeColor:'#8b0000',pointRadius:6};break;case'Gray+White':return/* FeatureStyleOptions */{fillColor:'gray',strokeColor:'white',pointRadius:6};break;default:// Color not defined.return/* FeatureStyleOptions */{fillColor:'yellow',pointRadius:8};break;}}
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

functionsetStyle(/* FeatureStyleFunctionOptions */params){// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];// Apply styles. Fill is primary fur color, stroke is secondary fur color.switch(furColors){case"Black+":return/* FeatureStyleOptions */{fillColor:"black",pointRadius:8};break;case"Cinnamon+":return/* FeatureStyleOptions */{fillColor:"#8b0000",pointRadius:8};break;case"Cinnamon+Gray":return/* FeatureStyleOptions */{fillColor:"#8b0000",strokeColor:"gray",pointRadius:6,};break;case"Cinnamon+White":return/* FeatureStyleOptions */{fillColor:"#8b0000",strokeColor:"white",pointRadius:6,};break;case"Gray+":return/* FeatureStyleOptions */{fillColor:"gray",pointRadius:8};break;case"Gray+Cinnamon":return/* FeatureStyleOptions */{fillColor:"gray",strokeColor:"#8b0000",pointRadius:6,};break;case"Gray+Cinnamon, White":return/* FeatureStyleOptions */{fillColor:"silver",strokeColor:"#8b0000",pointRadius:6,};break;case"Gray+White":return/* FeatureStyleOptions */{fillColor:"gray",strokeColor:"white",pointRadius:6,};break;default:// Color not defined.return/* FeatureStyleOptions */{fillColor:"yellow",pointRadius:8};break;}}

Apply style to the dataset feature layer

To apply the styles in the feature style function:

  1. Get the dataset feature layer by callingmap.getDatasetFeatureLayer(),passing the dataset ID.
  2. Apply the style by setting the feature style options (e.g.styleOptions)or function (e.g.setStyle) on the dataset layer.

TypeScript

constdatasetLayer=map.getDatasetFeatureLayer(datasetId);datasetLayer.style=styleOptions;
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

constdatasetLayer=map.getDatasetFeatureLayer(datasetId);datasetLayer.style=styleOptions;

Remove styling from a layer

To remove styling from a layer, set thestyle tonull:

featureLayer.style=null;

You can also returnnull from your feature style function, for example if youwant a subset of features to remain invisible.

Add attribution text

Your map must display any required attribution(s) when displaying uploadeddatasets on Google Maps. Attribution text must not obscure or interfere with theGoogle logo.

One way to add attribution text is by usingcustom controlsto place arbitrary HTML at standard positions on the map. The following codeexample shows a function that programmatically creates one such custom control:

TypeScript

functioncreateAttribution(map){constattributionLabel=document.createElement('div');// Define CSS styles.attributionLabel.style.backgroundColor='#fff';attributionLabel.style.opacity='0.7';attributionLabel.style.fontFamily='Roboto,Arial,sans-serif';attributionLabel.style.fontSize='10px';attributionLabel.style.padding='2px';attributionLabel.style.margin='2px';attributionLabel.textContent='Data source: NYC Open Data';returnattributionLabel;}
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

functioncreateAttribution(map){constattributionLabel=document.createElement("div");// Define CSS styles.attributionLabel.style.backgroundColor="#fff";attributionLabel.style.opacity="0.7";attributionLabel.style.fontFamily="Roboto,Arial,sans-serif";attributionLabel.style.fontSize="10px";attributionLabel.style.padding="2px";attributionLabel.style.margin="2px";attributionLabel.textContent="Data source: NYC Open Data";returnattributionLabel;}

Once the control is defined, you can add it to the map at initialization time,as shown here:

TypeScript

// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement('div');constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement("div");constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);

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

Last updated 2025-12-11 UTC.