Building a simple weather app with the new Google Weather API

Picture of Julia Wu

Julia Wu

Marketing, Master Concept
Google Weather API: Building a Simple Weather Application

In this blog post, we’ll use the new Google Weather API announced during Google Cloud Next 2025 to build a simple weather app that shows the current and 7 day weather forecast for Hong Kong.

Afilab - using weather API in your APP
Create your own warther app with Googel Weather API
Source: Master Concept

What is the Google Weather API?

The Google Weather API is part of Google’s latest suite of environmental and geospatial analytics tools designed to support smarter business decisions through deeper insights into the physical world. This new collection also includes the Places Insights API, Photorealistic 3D Tiles and the Air Quality API.

📚 Learn more about the latest geospatial analytics tools announced in Google Cloud Next 2025

It allows you to retrieve real-time, hyperlocal current and predicted weather data for locations worldwide. The API offers comprehensive weather information, including temperature, precipitation, wind speed, UV index, and more, enabling developers to easily create weather-aware applications by combining the Google Weather API with traffic, geospatial or environmental data sources.

How does the Google Weather API work?

Google collects weather data from multiple sources and processes it using a proprietary model that blends AI with physics-based techniques. This allows Google to deliver current conditions, forecasts, and historical weather data for any location worldwide. Google has been using this weather model in its search results for more than a year, but the Google Weather API is the first time Google is making its own weather model available to the public.

The Google Weather API has three main endpoints:

  • /currentConditions: returns information about current weather conditions at a specific location.
  • /forecast: returns daily and hourly predicted weather conditions for up to 10 days in advance
  • /history: returns up to 24 hours of hourly historical weather data at a given location, starting from the last hour.

Current Conditions Endpoint

A call to the current conditions endpoint of the Google Weather API only requires geographic coordinates (latitude and longitude):

GET https://weather.googleapis.com/v1/currentConditions:lookup?key={YOUR_API_KEY}&location.latitude={LATITUDE}&location.longitude={LONGITUDE}&unitsSystem={UNITS}

?key=YOUR_API_KEY&
location.latitude=LATITUDE&
location.longitude=LONGITUDE&
unitsSystem=UNITS

YOUR_API_KEY (required): Your Google Maps API key with the Weather API enabled.

LATITUDE (required): The latitude of the location you are querying e.g. 22.302711 for Hong Kong.

LONGITUDE (required): The longitude of the location you are querying e.g. 114.177216 for Hong Kong.

UNITS (optional): The units system to use for the returned weather conditions. If not provided, the returned weather conditions will be in the metric system (default = METRIC). If in the United States, use unitsSystem=IMPERIAL.

Here’s the response from the Google Weather API for the weather right now looks like in Hong Kong (22.302711, 114.177216):

{
    "currentTime": "2025-04-18T09:03:56.202537583Z",
    "timeZone": {
        "id": "Asia/Hong_Kong"
    },
    "isDaytime": true,
    "weatherCondition": {
        "iconBaseUri": "https://maps.gstatic.com/weather/v1/cloudy",
        "description": {
            "text": "Cloudy",
            "languageCode": "en"
        },
        "type": "CLOUDY"
    },
    "temperature": {
        "degrees": 24.9,
        "unit": "CELSIUS"
    },
    "feelsLikeTemperature": {
        "degrees": 27.6,
        "unit": "CELSIUS"
    },
    "dewPoint": {
        "degrees": 23.1,
        "unit": "CELSIUS"
    },
    "heatIndex": {
        "degrees": 27.6,
        "unit": "CELSIUS"
    },
    "windChill": {
        "degrees": 24.9,
        "unit": "CELSIUS"
    },
    "relativeHumidity": 90,
    "uvIndex": 0,
    "precipitation": {
        "probability": {
            "percent": 20,
            "type": "RAIN"
        },
        "snowQpf": {
            "quantity": 0,
            "unit": "MILLIMETERS"
        },
        "qpf": {
            "quantity": 0,
            "unit": "MILLIMETERS"
        }
    },
    "thunderstormProbability": 40,
    "airPressure": {
        "meanSeaLevelMillibars": 1007.72
    },
    "wind": {
        "direction": {
            "degrees": 180,
            "cardinal": "SOUTH"
        },
        "speed": {
            "value": 13,
            "unit": "KILOMETERS_PER_HOUR"
        },
        "gust": {
            "value": 23,
            "unit": "KILOMETERS_PER_HOUR"
        }
    },
    "visibility": {
        "distance": 16,
        "unit": "KILOMETERS"
    },
    "cloudCover": 95,
    "currentConditionsHistory": {
        "temperatureChange": {
            "degrees": 0.7,
            "unit": "CELSIUS"
        },
        "maxTemperature": {
            "degrees": 25.5,
            "unit": "CELSIUS"
        },
        "minTemperature": {
            "degrees": 23.2,
            "unit": "CELSIUS"
        },
        "snowQpf": {
            "quantity": 0,
            "unit": "MILLIMETERS"
        },
        "qpf": {
            "quantity": 0.0356,
            "unit": "MILLIMETERS"
        }
    }
}

In the response, you can find the temperature, description.text (descriptive text) and the corresponding weather icon, along with various other useful pieces of information such as feelsLikeTemperature, precipitation, wind.direction and humidity

Forecast Endpoint

Like the Current Conditions endpoint, the Forecast endpoint only needs the geographic coordinates of the location you want weather data for.

GET https://weather.googleapis.com/v1/forecast/days:lookup?key=YOUR_API_KEY&location.latitude=LATITUDE&location.longitude=LONGITUDE  

?key=YOUR_API_KEY&
location.latitude=LATITUDE&
location.longitude=LONGITUDE

YOUR_API_KEY (required): Your Google Maps API key with the Weather API enabled.

LATITUDE (required): The latitude of the location you are querying e.g. 22.302711 for Hong Kong.

LONGITUDE (required): The longitude of the location you are querying e.g. 114.177216 for Hong Kong.

By default, the forecast/days endpoint returns 10 days of data, starting from the current hour. You can scope your request to a particular number of days by adding the days parameter to your request e.g. https://weather.googleapis.com/v1/forecast/days:lookup?key={YOUR_API_KEY}&location.latitude=22.302711&location.longitude=114.177216&days=2 returns the two day weather forecast for Hong Kong.

{
    "forecastDays": [
        {
            "interval": {
                "startTime": "2025-04-17T23:00:00Z",
                "endTime": "2025-04-18T23:00:00Z"
            },
            "displayDate": {
                "year": 2025,
                "month": 4,
                "day": 18
            },
            "daytimeForecast": {
                "interval": {
                    "startTime": "2025-04-17T23:00:00Z",
                    "endTime": "2025-04-18T11:00:00Z"
                },
                "weatherCondition": {
                    "iconBaseUri": "https://maps.gstatic.com/weather/v1/drizzle",
                    "description": {
                        "text": "Light rain",
                        "languageCode": "en"
                    },
                    "type": "LIGHT_RAIN"
                },
                "relativeHumidity": 90,
                "uvIndex": 4,
                "precipitation": {
                    "probability": {
                        "percent": 20,
                        "type": "RAIN"
                    },
                    "snowQpf": {
                        "quantity": 0,
                        "unit": "MILLIMETERS"
                    },
                    "qpf": {
                        "quantity": 0.0356,
                        "unit": "MILLIMETERS"
                    }
                },
                "thunderstormProbability": 40,
                "wind": {
                    "direction": {
                        "degrees": 165,
                        "cardinal": "SOUTH_SOUTHEAST"
                    },
                    "speed": {
                        "value": 14,
                        "unit": "KILOMETERS_PER_HOUR"
                    },
                    "gust": {
                        "value": 24,
                        "unit": "KILOMETERS_PER_HOUR"
                    }
                },
                "cloudCover": 100,
                "iceThickness": {
                    "thickness": 0,
                    "unit": "MILLIMETERS"
                }
            },
            "nighttimeForecast": {
                "interval": {
                    "startTime": "2025-04-18T11:00:00Z",
                    "endTime": "2025-04-18T23:00:00Z"
                },
                "weatherCondition": {
                    "iconBaseUri": "https://maps.gstatic.com/weather/v1/drizzle",
                    "description": {
                        "text": "Light rain",
                        "languageCode": "en"
                    },
                    "type": "LIGHT_RAIN"
                },
                "relativeHumidity": 93,
                "uvIndex": 0,
                "precipitation": {
                    "probability": {
                        "percent": 20,
                        "type": "RAIN"
                    },
                    "snowQpf": {
                        "quantity": 0,
                        "unit": "MILLIMETERS"
                    },
                    "qpf": {
                        "quantity": 0,
                        "unit": "MILLIMETERS"
                    }
                },
                "thunderstormProbability": 40,
                "wind": {
                    "direction": {
                        "degrees": 175,
                        "cardinal": "SOUTH"
                    },
                    "speed": {
                        "value": 13,
                        "unit": "KILOMETERS_PER_HOUR"
                    },
                    "gust": {
                        "value": 23,
                        "unit": "KILOMETERS_PER_HOUR"
                    }
                },
                "cloudCover": 100,
                "iceThickness": {
                    "thickness": 0,
                    "unit": "MILLIMETERS"
                }
            },
            "maxTemperature": {
                "degrees": 25.8,
                "unit": "CELSIUS"
            },
            "minTemperature": {
                "degrees": 23.6,
                "unit": "CELSIUS"
            },
            "feelsLikeMaxTemperature": {
                "degrees": 28.9,
                "unit": "CELSIUS"
            },
            "feelsLikeMinTemperature": {
                "degrees": 25.9,
                "unit": "CELSIUS"
            },
            "sunEvents": {
                "sunriseTime": "2025-04-17T22:01:02.724182325Z",
                "sunsetTime": "2025-04-18T10:44:33.202524577Z"
            },
            "moonEvents": {
                "moonPhase": "WANING_GIBBOUS",
                "moonriseTimes": [
                    "2025-04-18T15:30:01.703719186Z"
                ],
                "moonsetTimes": [
                    "2025-04-18T01:16:17.718137080Z"
                ]
            },
            "maxHeatIndex": {
                "degrees": 28.9,
                "unit": "CELSIUS"
            }
        },
        {
            "interval": {
                "startTime": "2025-04-18T23:00:00Z",
                "endTime": "2025-04-19T23:00:00Z"
            },
            "displayDate": {
                "year": 2025,
                "month": 4,
                "day": 19
            },
            "daytimeForecast": {
                "interval": {
                    "startTime": "2025-04-18T23:00:00Z",
                    "endTime": "2025-04-19T11:00:00Z"
                },
                "weatherCondition": {
                    "iconBaseUri": "https://maps.gstatic.com/weather/v1/drizzle",
                    "description": {
                        "text": "Light rain",
                        "languageCode": "en"
                    },
                    "type": "LIGHT_RAIN"
                },
                "relativeHumidity": 79,
                "uvIndex": 6,
                "precipitation": {
                    "probability": {
                        "percent": 25,
                        "type": "RAIN"
                    },
                    "snowQpf": {
                        "quantity": 0,
                        "unit": "MILLIMETERS"
                    },
                    "qpf": {
                        "quantity": 0.4978,
                        "unit": "MILLIMETERS"
                    }
                },
                "thunderstormProbability": 30,
                "wind": {
                    "direction": {
                        "degrees": 195,
                        "cardinal": "SOUTH_SOUTHWEST"
                    },
                    "speed": {
                        "value": 16,
                        "unit": "KILOMETERS_PER_HOUR"
                    },
                    "gust": {
                        "value": 27,
                        "unit": "KILOMETERS_PER_HOUR"
                    }
                },
                "cloudCover": 100,
                "iceThickness": {
                    "thickness": 0,
                    "unit": "MILLIMETERS"
                }
            },
            "nighttimeForecast": {
                "interval": {
                    "startTime": "2025-04-19T11:00:00Z",
                    "endTime": "2025-04-19T23:00:00Z"
                },
                "weatherCondition": {
                    "iconBaseUri": "https://maps.gstatic.com/weather/v1/cloudy",
                    "description": {
                        "text": "Cloudy",
                        "languageCode": "en"
                    },
                    "type": "CLOUDY"
                },
                "relativeHumidity": 84,
                "uvIndex": 0,
                "precipitation": {
                    "probability": {
                        "percent": 20,
                        "type": "RAIN"
                    },
                    "snowQpf": {
                        "quantity": 0,
                        "unit": "MILLIMETERS"
                    },
                    "qpf": {
                        "quantity": 0,
                        "unit": "MILLIMETERS"
                    }
                },
                "thunderstormProbability": 30,
                "wind": {
                    "direction": {
                        "degrees": 186,
                        "cardinal": "SOUTH"
                    },
                    "speed": {
                        "value": 14,
                        "unit": "KILOMETERS_PER_HOUR"
                    },
                    "gust": {
                        "value": 24,
                        "unit": "KILOMETERS_PER_HOUR"
                    }
                },
                "cloudCover": 100,
                "iceThickness": {
                    "thickness": 0,
                    "unit": "MILLIMETERS"
                }
            },
            "maxTemperature": {
                "degrees": 26.6,
                "unit": "CELSIUS"
            },
            "minTemperature": {
                "degrees": 23.4,
                "unit": "CELSIUS"
            },
            "feelsLikeMaxTemperature": {
                "degrees": 28.7,
                "unit": "CELSIUS"
            },
            "feelsLikeMinTemperature": {
                "degrees": 25.6,
                "unit": "CELSIUS"
            },
            "sunEvents": {
                "sunriseTime": "2025-04-18T22:00:13.645720027Z",
                "sunsetTime": "2025-04-19T10:44:56.074941271Z"
            },
            "moonEvents": {
                "moonPhase": "WANING_GIBBOUS",
                "moonsetTimes": [
                    "2025-04-19T02:10:04.793953462Z"
                ]
            },
            "maxHeatIndex": {
                "degrees": 28.7,
                "unit": "CELSIUS"
            }
        }
    ],
    "timeZone": {
        "id": "Asia/Hong_Kong"
    }
}

In the response, you can find the temperature, description.text (descriptive text) and the corresponding weather icon, along with various other useful pieces of information such as feelsLikeTemperature, precipitation, wind.direction and humidity for each day (for both daytimeForecast and nighttimeForecast) as an entry in the forecastDays array.

Calendar Widget

Once you get a response from the Google Weather API, it’s easy to make a calendar widget with basic HTML and Javascript by formatting the forecastDays array as needed  

function updateForecast(forecastDays) {
  const container = document.getElementById("forecast-container");
  const template = document.getElementById("forecast-card-template");
  // Store template content
  const templateContent = template.content.cloneNode(true);
  // Clear existing forecast cards
  container.innerHTML = "";
  forecastDays.forEach((day) => {
    const date = new Date(day.interval.startTime);
    const dayOfWeek = new Intl.DateTimeFormat("en-US", {
      weekday: "short",
    }).format(date);
    const monthDay = new Intl.DateTimeFormat("en-US", {
      month: "short",
      day: "numeric",
    }).format(date);
    // Clone the template
    const card = templateContent.cloneNode(true);
    // Update the content
    card.querySelector(
      ".forecast-date"
    ).textContent = `${dayOfWeek}, ${monthDay}`;
    // Day forecast
    const dayTemp = card.querySelector(".day-temp");
    dayTemp.textContent = `${Math.round(day.maxTemperature.degrees)}°`;
    const dayIcon = card.querySelector(".day-temp .weather-icon");
    if (!dayIcon) {
      const icon = document.createElement("img");
      icon.className = "weather-icon";
      icon.src = `${day.daytimeForecast.weatherCondition.iconBaseUri}.png`;
      icon.alt = day.daytimeForecast.weatherCondition.description.text;
      dayTemp.appendChild(icon);
    } else {
      dayIcon.src = `${day.daytimeForecast.weatherCondition.iconBaseUri}.png`;
      dayIcon.alt = day.daytimeForecast.weatherCondition.description.text;
    }
    card.querySelector(".day-description").textContent =
      day.daytimeForecast.weatherCondition.description.text;
    // Night forecast
    const nightTemp = card.querySelector(".night-temp");
    nightTemp.textContent = `${Math.round(day.minTemperature.degrees)}°`;
    const nightIcon = card.querySelector(".night-temp .weather-icon");
    if (!nightIcon) {
      const icon = document.createElement("img");
      icon.className = "weather-icon";
      icon.src = `${day.nighttimeForecast.weatherCondition.iconBaseUri}.png`;
      icon.alt = day.nighttimeForecast.weatherCondition.description.text;
      nightTemp.appendChild(icon);
    } else {
      nightIcon.src = `${day.nighttimeForecast.weatherCondition.iconBaseUri}.png`;
      nightIcon.alt = day.nighttimeForecast.weatherCondition.description.text;
    }
    card.querySelector(".night-description").textContent =
      day.nighttimeForecast.weatherCondition.description.text;
    container.appendChild(card);
  });

How much does the Google Weather API cost?

For now, the Google Weather API is in Preview (pre-GA) and is free to use. For more information, please reach out to our professional GIS experts!

Conclusion

The Google Weather API is a powerful addition to Google Maps’ growing suite of geospatial analytics tools, which also includes the Google Places Insights API, Photorealistic 3D Tiles, and the Air Quality API. It works especially well alongside the Google Places API and Google Routes API. Together, these services make it possible to retrieve weather conditions for a specific area or along a planned route.

If you have questions about the Google Weather API or suggestions for future topics related to Google Maps APIs, we’d love to hear from you!

Leave Us Your Message
We are ready to talk!

Leave Us Your Message
We are ready to talk!

思想科技 Master Concept
微信公众号:Master_Concept

Can't Find What You Need? Join Our Latest Event!

Be the first to learn about
New Trends