Using IFrame to embed google directions

Question

I am building a react app and I am trying to embed Google Maps direction on my site. Here is my code:

import React from "react";
import Iframe from "react-iframe";

export default (props) => {
  return (
    <Iframe
      width="600"
      height="450"
      frameborder="0"
      style="border:0"
      src={`https://www.google.com/maps/embed/v1/directions
      ?key=<my_api_key>
      &origin=Oslo+Norway
      &destination=Telemark+Norway
      &avoid=tolls|highways`}
      allowfullscreen
    />
  );
};

I am getting error which I saw many people get before:

delivery-plan:1 Refused to display <url> in a frame because it set 'X-Frame-Options' to 'sameorigin'.

What is weird is that when I change to URL to use the places API, where the Iframe becomes:

<Iframe
      width="600"
      height="450"
      frameborder="0"
      style="border:0"
      src={`https://www.google.com/maps/embed/v1/place?key=<my_api-token>
      &q=Space+Needle,Seattle+WA`}
      allowfullscreen
    />

it works completely find.

Note that both the URLs are taken directly from Google API documentation

Answer 1

I tried your code without the newlines in the URL and it worked for me. That's because the URL with newlines gets escaped with a bunch of %20 which make it invalid.