Display Google Static maps API response in React

Question

Currently trying to use googles statics maps api to generate an image from a polyline. The polyline is from Strava's API's.

This can be done with the following code:

const response = await axios(`https://maps.googleapis.com/maps/api/staticmap?path=enc:${props.obj.map.summary_polyline}&size=400x400&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY}}`, {
                        method: 'GET',
                    })

This api call is responding with a 200 status an image that I have no idea how to display. I can see its an image from the network tab

example response:

Image from network tab:

So far, I have tried to take the data from the response and put it inside of a src tag on an image, as the api docs suggest.

The image below shows that the data is baked into the html, it should be displaying where the white box is:

Answer 1

You use the request in the src of an <img /> tag instead of the response

The official documentation specifically says that:

"A Maps Static API image is embedded within an <img> tag's src attribute, or its equivalent in other programming languages."

With that said, since you are using React, we can do it this way.

To reproduce your expected output, you can declare a variable for your path, API key, and Static Maps Request inside your component like so:

const path =
  "weight:3%7Ccolor:red%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o%7CF}vXaj\\h`]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh`]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY}t]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C`l@uoJrvdAgq@fppAsjGhg`@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf%7Ci@mqJtb^s%7C@fbjA{wDfs`BmvEfqs@umWt_Nwn^pen@qiBr`xAcvMr{Zidg@dtjDkbM%7Cd_@";
const APIKey = "YOUR_API_KEY";
const staticMapsUrl =
  "https://maps.googleapis.com/maps/api/staticmap" +
  "?size=400x400&center=59.900503,-135.478011&zoom=4" +
  `&path=${path}` +
  `&key=${APIKey}`;

Please do note that this is just my way of doing this thing for better readability. So in your case, you can do whatever way you want here as long as your filling up the required parameters for the request to be successful.

Then your return should look something like this:

return (
  <div>
    <p>Static Map In React</p>
    <img src={staticMapsUrl} alt="map" />
  </div>
);

And with all that, the output should be like this:

Here's the full code of the component:

import React from "react";

export default function Map() {
  const path =
    "weight:3%7Ccolor:red%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o%7CF}vXaj\\h`]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh`]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY}t]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C`l@uoJrvdAgq@fppAsjGhg`@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf%7Ci@mqJtb^s%7C@fbjA{wDfs`BmvEfqs@umWt_Nwn^pen@qiBr`xAcvMr{Zidg@dtjDkbM%7Cd_@";
  const APIKey = "YOUR_API_KEY";
  const staticMapsUrl =
    "https://maps.googleapis.com/maps/api/staticmap" +
    "?size=400x400&center=59.900503,-135.478011&zoom=4" +
    `&path=${path}` +
    `&key=${APIKey}`;

  return (
    <div>
      <p>Static Map In React</p>
      <img src={staticMapsUrl} alt="map" />
    </div>
  );
}

Here's also a proof of concept sandbox that you can check and play around with: https://codesandbox.io/s/static-maps-in-react-6k6hmp?file=/src/Map.js

I hope this helps!