Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/dds-boundaries/start below:

Get started | Maps JavaScript API

Stay organized with collections Save and categorize content based on your preferences.

To use data-driven styling for boundaries you must create a map ID that uses the JavaScript vector map. Next, you must create a new map style, select the boundary feature layers, and associate the style with your map ID.

To create a new map ID, follow the steps in Cloud customization. Set the Map type to JavaScript, and select the Vector option. Check Tilt and Rotation to enable tilt and rotation on the map. If the use of tilt or heading adversely affects your app, leave Tilt and Rotation un-checked so users cannot adjust them.

To create a new map style, follow the instructions in Manage map styles to create the style, and associate the style with the map ID you just created.

In the Google API Console you can select which feature layers to display. This determines which kinds of boundaries will appear on the map (for example localities, states, and so on).

1. In the Google API Console, go to the Map Styles page.
2. Select a project if prompted.
3. Select a map style.
4. Click the Feature layers drop-down to add or remove layers.
5. Click Save to save your changes and make them available to your maps.

This requires the map ID you just created. It can be found on your Maps Management page.

1. Load the Maps JavaScript API by adding the inline bootstrap loader to your application code, as shown in the following snippet:

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

1. Provide a map ID when you instantiate the map using the mapId property. This should be the map ID that you configured using a map style with feature layers enabled.

   map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
   });

Learn more about loading the Maps JavaScript API.

To get a reference to a feature layer on your map, call map.getFeatureLayer() when the map initializes:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Data-driven styling for boundaries requires capabilities which are enabled in the Google API Console, and associated with a map ID. Because map IDs are ephemeral and subject to change, you can call map.getMapCapabilities() to verify whether a certain capability (for example data-driven styling) is available prior to calling it. This check is optional.

The following example shows adding a listener to subscribe to map capability changes:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

• Style a boundary polygon
• Make a choropleth map
• Handle mouse events
• Get a place ID for a region
• Use the Geocoding and Places APIs with data-driven styling for boundaries

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 2025-07-09 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[[["Data-driven styling for boundaries requires a JavaScript vector map with a custom style associated with a map ID."],["You can select specific boundary feature layers (like localities or states) to display in the Google API Console to optimize performance."],["Initialize your map with the designated map ID and API key, ensuring they are linked to the same Google Cloud project."],["Utilize `map.getFeatureLayer()` to access and interact with specific feature layers on your map."],["Verify the availability of data-driven styling by using `map.getMapCapabilities()` before implementation."]]],["To utilize data-driven styling for boundaries, first, create a JavaScript vector map ID in the Google API Console. Next, create a new map style and associate it with the map ID, selecting the desired boundary feature layers. Then, update your map initialization code with the new map ID. Ensure your map ID and API key are linked to the same project. Finally, use `map.getFeatureLayer()` to reference feature layers and `map.getMapCapabilities()` to check styling availability.\n"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4