This tutorial shows you how to display Pollen API
[heatmap tiles](https://developers.google.com/maps/documentation/pollen/heatmap-tiles.md.txt) in a web page using HTML, CSS, and Javascript.
Here's the map you'll create using this tutorial:
<iframe src="https://developers.devsite.google/frame/maps/documentation/pollen/embed-heatmaps_f70741cf23b14ebdab291e3e672186d985b7c2c32a407d5c5b874bcb401c92ef.frame" class="framebox inherit-locale " allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

## Get started

These are the steps we'll cover for creating a web page with Pollen API
heatmap tiles:

1. [Get an API key](https://developers.google.com/maps/documentation/pollen/embed-heatmaps.md.txt#step_1_get_an_api_key)
2. [Create a web page using HTML](https://developers.google.com/maps/documentation/pollen/embed-heatmaps.md.txt#step_2_create_a_web_page_using_html)
3. [Configure styles using CSS](https://developers.google.com/maps/documentation/pollen/embed-heatmaps.md.txt#step_3_configure_styles_using_css)
4. [Fetch Pollen API data using JavaScript](https://developers.google.com/maps/documentation/pollen/embed-heatmaps.md.txt#step_4_fetch_pollen_api_data_using_javascript)

To create your web page, you'll need a web browser that supports Javascript. See
[Browser Support](https://developers.google.com/maps/documentation/javascript/browsersupport.md.txt) for a full list
of supported browsers.

## Step 1: Get an API key

This section explains how to authenticate your app to the
Pollen API using your own API key.

Follow these steps to get an API key:

1. Go to the
   [Google Cloud console](https://console.cloud.google.com/project/_/google/maps-apis/overview).

2. Create or select a project.

3. Click **Continue** to enable the API and any related services.

4. On the **Credentials** page, get an **API key** and set the API key
   restrictions.

   > [!NOTE]
   > **Note:** If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.

5. To prevent quota theft and secure your API key, see [Using API
   Keys](https://developers.google.com/maps/documentation/pollen/get-api-key).

6. Enable billing. See [Usage and Billing](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt)
   for more information.

You are now ready to use your API key.

## Step 2: Create a web page using HTML

Here's the code for a basic HTML web page:

```html
<html>
  <head>
    <title>Pollen heatmaps around the world</title>
    <style>
      /* Configure CSS here. */
    </style>
  </head>
  <body>
    <!-- Add JavaScript functions and button containers here. -->
  </body>
</html>
```

To load a map on your web page, add a `script` tag containing the bootstrap
loader for the Pollen API and include your API key:

```html
  <script
    src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
  </script>
```

## Step 3: Configure styles using CSS

Next, use CSS to configure the map's appearance on your web page.

```html
  <style>
    /*
    * Always set the map height explicitly to define the size of the div element
    * that contains the map.
    */
    #map {
      height: 600px;
    }
    #container{
      position:absolute;
      display:inline-block;
      z-index:10;
      margin-left:50%;
      transform:translateX(-50%);
      bottom:40px;
    }
  </style>
```

You can also use CSS to configure buttons that display different
Pollen API data (`TREE`, `GRASS`, or `WEED`):

```html
  <style>
    button{
    width:100px;
    height:34px; 
    /*top:50px;*/
    display:inline-block;
    position:relative;
    text-align:center;
    border:none;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.29);
    color:#FFF;
    font-weight:400;
    border-radius:4px;
    margin-left:4px;
    font-family:"Google Sans","Roboto","Arial";
    line-height:1em;
  }
    #tree{background:#009c1a}
    #grass{background:#22b600}
    #weed{background:#26cc00}
    button:active{background:#999999 !important;}
  </style>
```

Use a `<div>` element to create containers for buttons and the map:

```html
  <div id="container">
        <button type="button" id="tree">TREE</button>
        <button type="button" id="grass">GRASS</button>
        <button type="button" id="weed">WEED</button>
  </div>
  <div id="map"></div>
```

## Step 4: Fetch Pollen API data using JavaScript

Use JavaScript to fetch Pollen API data and display it on an interactive
map:

```javascript
  function getNormalizedCoord(coord, zoom) {
    const y = coord.y;
    let x = coord.x;
    // Define the tile range in one direction. The range is dependent on zoom level:
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc.
    const tileRange = 1 << zoom;

    // don't repeat across y-axis (vertically)
    if (y < 0 || y >= tileRange) {
      return null;
    }

    // repeat across x-axis
    if (x < 0 || x >= tileRange) {
      x = ((x % tileRange) + tileRange) % tileRange;
    }
    return { x: x, y: y };
  }

  let pollen = "TREE_UPI"
  class PollenMapType {
    tileSize;
    alt = null;
    maxZoom = 16;
    minZoom = 3;
    name = null;
    projection = null;
    radius = 6378137;
    constructor(tileSize) {
      this.tileSize = tileSize;
    }

    getTile(coord, zoom, ownerDocument) {
      const img = ownerDocument.createElement("img");
      const mapType = pollen;
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      const x = coord.x;
      const y = coord.y;
      const key = "YOUR_API_KEY";
      img.style.opacity = 0.8;
      img.src = `https://pollen.googleapis.com/v1/mapTypes/${mapType}/heatmapTiles/${zoom}/${x}/${y}?key=${key}`;
      return img;
    }
    releaseTile(tile) {}
  }
```

Finally, use JavaScript to initialize the map and display Pollen API
data based on the selected buttons:

```javascript
  function initMap() {
    const myLatLng = { lat: 40.3769, lng: -80.5417 };
    const map = new google.maps.Map(document.getElementById("map"), {
      mapId: "ffcdd6091fa9fb03",
      zoom: 0,
      center: myLatLng,
      maxZoom: 16,
      minZoom: 3,
      restriction: {
        latLngBounds: {north: 80, south: -80, west: -180, east: 180},
        strictBounds: true,
      },
      streetViewControl: false,
    });
    const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
    map.overlayMapTypes.insertAt(0, pollenMapType);
    
    document.querySelector("#tree").addEventListener("click", function(){
        pollen ="TREE_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
    document.querySelector("#grass").addEventListener("click", function(){
        pollen ="GRASS_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
      document.querySelector("#weed").addEventListener("click", function(){
        pollen ="WEED_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
  }
```