{temperature?.degrees !== undefined && (
;
```
It also uses *optional chaining* to safely access the `iconBaseUri` property inside `weatherCondition` and display a weather icon. If `weatherCondition` is `null` or `undefined`, it will not throw an error—it just resolves to `undefined`. And if `iconBaseUri` is `undefined` or `null`, it defaults to an empty string which prevents a `null.png` or `undefined.png` source.
To give a concrete example, if `weatherCondition.iconBaseUri` resolves to **"http://maps.gstatic.com/weather/v1/cloudy"**, `{Math.round(temperature.degrees)}°
)}
5-Day Forecast
│ ├── // Grid container for the forecast cards
│ │
│ ├── Loop through `forecastDays.map(...)`
│ │ ├──
// Each Forecast Card
│ │ │ │
│ │ │ ├──
// Date of the forecast
│ │ │ │ └── [Formatted Date]
│ │ │ │
│ │ │ ├── **Day Section**
│ │ │ │ ├──
│ │ │ │ │ ├── [Max Temperature °] (if available)
│ │ │ │ │ └── ![[Description]]([Icon URL])
│ │ │ │ └──
│ │ │ │ └── [Daytime Weather Description]
│ │ │ │
│ │ │ ├── // Divider
│ │ │ │
│ │ │ ├── **Night Section**
│ │ │ │ ├──
Night
│ │ │ │ ├──
│ │ │ │ │ ├── [Min Temperature °] (if available)
│ │ │ │ │ └──
│ │ │ │ └──
│ │ │ │ └── [Nighttime Weather Description]
│ │ │ │
│ │ │ └── **Additional Details**
│ │ │ ├──
│ │ │ │ ├──
│ │ │ │ │ ├── Wind:
│ │ │ │ │ └── [Wind Speed]
│ │ │ │ │
│ │ │ │ ├──
// End of Forecast
```
### Google Weather Backend
**index.js**
Now on to the backend. [google\_weather\_backend](https://github.com/afilabs/google%5Fweather%5Fbackend?ref=blog.afi.io) runs on an [Express](https://expressjs.com/?ref=blog.afi.io) web server, listening on port 4000 (you can change this in the `.env` file). Requests are routed to `index.js` for handling. There are four main methods, each corresponding to the `/places`, `/placeDetails`, `/currentConditions` and `/forecast` endpoints called by [google\_weather\_frontend](https://github.com/afilabs/google%5Fweather%5Ffrontend?ref=blog.afi.io).
```
/*** index.js ***/
const express = require("express");
const axios = require("axios");
const cors = require("cors");
const path = require("path");
// Load environment variables based on NODE_ENV
const envFile = process.env.NODE_ENV === "test" ? ".env.test" : ".env";
require("dotenv").config({ path: path.resolve(__dirname, envFile) });
const app = express();
const PORT = process.env.PORT || 3000;
// ... CORS configuration code
app.use(express.json());
// Google Maps Places API proxy endpoint
app.get("/api/places", async (req, res) => {
try {
const { input, types } = req.query;
if (!input) {
return res
.status(400)
.json({ error: "Input query parameter is required" });
}
const response = await axios.post(
"https://places.googleapis.com/v1/places:autocomplete",
{
input,
includedPrimaryTypes: types ? [types] : undefined,
},
{
headers: {
"Content-Type": "application/json",
"X-Goog-Api-Key": process.env.GOOGLE_MAPS_API_KEY,
"X-Goog-FieldMask":
"suggestions.placePrediction.text.text,suggestions.placePrediction.placeId,suggestions.placePrediction.types",
},
},
);
// Transform the response to match the previous API structure
const predictions = response.data.suggestions.map((suggestion) => ({
description: suggestion.placePrediction.text.text,
place_id: suggestion.placePrediction.placeId,
types: suggestion.placePrediction.types,
}));
res.json({ predictions });
} catch (error) {
console.error("Error fetching places data:", error);
res.status(500).json({ error: "Failed to fetch places data" });
}
});
// Place Details API endpoint
app.get("/api/place-details", async (req, res) => {
try {
const { placeId } = req.query;
if (!placeId) {
return res
.status(400)
.json({ error: "placeId query parameter is required" });
}
const response = await axios.get(
"https://maps.googleapis.com/maps/api/place/details/json",
{
params: {
key: process.env.GOOGLE_MAPS_API_KEY,
place_id: placeId,
fields: "geometry,name,formatted_address",
},
},
);
res.json(response.data);
} catch (error) {
console.error("Error fetching place details:", error);
res.status(500).json({ error: "Failed to fetch place details" });
}
});
// Weather API endpoint
app.get("/api/current-conditions", async (req, res) => {
try {
const { latitude, longitude } = req.query;
if (!latitude || !longitude) {
return res
.status(400)
.json({ error: "Latitude and longitude are required" });
}
const response = await axios.get(
"https://weather.googleapis.com/v1/currentConditions:lookup",
{
params: {
key: process.env.GOOGLE_MAPS_API_KEY,
"location.latitude": latitude,
"location.longitude": longitude,
},
},
);
res.json(response.data);
} catch (error) {
console.error("Error fetching weather data:", error);
res.status(500).json({ error: "Failed to fetch weather data" });
}
});
// Forecast API endpoint
app.get("/api/forecast", async (req, res) => {
try {
const { latitude, longitude, days } = req.query;
if (!latitude || !longitude) {
return res
.status(400)
.json({ error: "Latitude and longitude are required" });
}
// Validate and limit days parameter
const requestedDays = parseInt(days) || 1;
if (requestedDays < 1 || requestedDays > 7) {
return res
.status(400)
.json({ error: "Days parameter must be between 1 and 7" });
}
const response = await axios.get(
"https://weather.googleapis.com/v1/forecast/days:lookup",
{
params: {
key: process.env.GOOGLE_MAPS_API_KEY,
"location.latitude": latitude,
"location.longitude": longitude,
days: requestedDays,
},
},
);
res.json(response.data);
} catch (error) {
console.error("Error fetching forecast data:", error);
res.status(500).json({ error: "Failed to fetch forecast data" });
}
});
// ... module check to determine if the current index.js is run directly
module.exports = app;
```
Each method follows the same pattern. Take the `/current-conditions` endpoint for example, which acts as a proxy to the [Google Weather API](https://developers.google.com/maps/documentation/weather?ref=blog.afi.io) to fetch the current weather conditions for a specified `latitude` and `longitude`.
```
/*** index.js ***/
const axios = require("axios");
app.get("/api/current-conditions", async (req, res) => {
try {
const { latitude, longitude } = req.query;
if (!latitude || !longitude) {
return res
.status(400)
.json({ error: "Latitude and longitude are required" });
}
const response = await axios.get(
"https://weather.googleapis.com/v1/currentConditions:lookup",
{
params: {
key: process.env.GOOGLE_MAPS_API_KEY,
"location.latitude": latitude,
"location.longitude": longitude,
},
},
);
res.json(response.data);
} catch (error) {
console.error("Error fetching weather data:", error);
res.status(500).json({ error: "Failed to fetch weather data" });
}
});
```
First, we import the Axios HTTP request library.
```
const axios = require("axios");
```
Second, we use Axios to define a `GET` route for `/api/current-conditions`. This endpoint is called by `weatherService.jsx` in [google\_weather\_frontend](https://github.com/afilabs/google%5Fweather%5Ffrontend?ref=blog.afi.io).
```
app.get("/api/current-conditions", async (req, res) => { }
```
Next, we destructure `latitude` and `longitude` from the request's query parameters.
```
const { latitude, longitude } = req.query;
```
For example, if the frontend makes a call to `/api/current-conditions?latitude=49.257&longitude=-123.206` (Vancouver, Canada), Javascript object detructuring will be able to extract **"49.257"** and **"-123.206"** from the URL.
After that, we use Axios to make a HTTP `GET` request to [https://weather.googleapis.com/v1/currentConditions:lookup](https://weather.googleapis.com/v1/currentConditions:lookup?ref=blog.afi.io).
```
const response = await axios.get(
"https://weather.googleapis.com/v1/currentConditions:lookup",
{
params: {
key: process.env.GOOGLE_MAPS_API_KEY,
"location.latitude": latitude,
"location.longitude": longitude,
},
},
);
```
This sends the following query parameters to the [Current Conditions](https://developers.google.com/maps/documentation/weather/current-conditions?ref=blog.afi.io) endpoint of the Google Weather API:
- `key`: Your Google Maps API Key, pulled from environment variables.
- `"location.latitude"`: The latitude from the query string.
- `"location.longitude"`: The longitude from the query string.
The full request might look like:
```
https://weather.googleapis.com/v1/currentConditions:lookup?key=YOUR_API_KEY&location.latitude=49.257&location.longitude=-123.206
```
If the API call is successful, we sends back the data from the Google Weather API as JSON, unmodified.
```
res.json(response.data);
```
### Deploy and run
To test the app, simply visit [https://google-weather-demo.afi.dev/](https://google-weather-demo.afi.dev/?ref=blog.afi.io) and enter an address into the search box on the top right. If you'd like to run the app locally, fork both [google\_weather\_frontend](https://github.com/afilabs/google%5Fweather%5Ffrontend?ref=blog.afi.io) and [google\_weather\_backend](https://github.com/afilabs/google%5Fweather%5Fbackend?ref=blog.afi.io) on GitHub and run `npm install` to install dependencies. Start the app by running `npm start` in each folder, then open [http://localhost:3001/](http://localhost:3001/?ref=blog.afi.io) in your browser to view it. Remember to update the `.env` files in the backend with a Google Maps API key that has both the Places API and Weather API enabled.
### What comes next
This tutorial showed you how to use the Google Weather API to build a [simple weather app](https://google-weather-demo.afi.dev/?ref=blog.afi.io). This was fun, but you probably won't be able to build a viable business with it because you'll have to compete with all the other Weather apps out there (also, it may violate Google's [Terms of Service](https://developers.google.com/maps/terms-20180207?ref=blog.afi.io), as their APIs cannot be used to develop products or services that compete with Google). But what if you could combine the Weather API with other Google Maps APIs to build something cool and useful? I'll show you how do exactly that in my next blog post.
**This article was written by** [**Afi Labs**](https://afi.io/?ref=blog.afi.io)**, a** [**Google Maps Premier Partner**](https://www.afi.io/?ref=blog.afi.io) **and reseller. We build route optimization, navigation, and fleet tracking software on Google Maps, and offer volume pricing on GMP licensing.** [**Talk to an engineer**](https://www.afi.io/contact%5Fus?ref=blog.afi.io) **or** [**follow Afian on LinkedIn**](https://www.linkedin.com/in/afian-anwar/?ref=blog.afi.io)**.**
Part 3: [Google Maps weather along route: Weather aware route planner](https://blog.afi.io/blog/google-maps-weather-along-route-weather-aware-planner/)
│ │ │ │ │ ├── Humidity:
│ │ │ │ │ └── [Humidity %]
│ │ │ │ │
│ │ │ │ ├──
// End of forecast-grid
│
└──
│ │ │ │ │ ├── UV Index:
│ │ │ │ │ └── [UV Index]
│ │ │ │ │
│ │ │ │ └──
// End of .forecast-card
│ │
│ └──
│ │ │ │ ├── Precip:
│ │ │ │ └── [Precipitation %]
│ │ │ │
│ │ │ └──
// End of .forecast-details
│ │ │
│ │ └──