Использование IFrame для встраивания маршрутов Google

Question

Я создаю приложение для реагирования и пытаюсь встроить направление Google Maps на свой сайт. Вот мой код:

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
    />
  );
};

Я получаю сообщение об ошибке, которое многие люди видели раньше:

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

Странно то, что когда я перехожу на URL, чтобы использовать API мест , где Iframe становится:

<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
    />

, он работает полностью найти.

Обратите внимание, что оба URL-адреса взяты непосредственно из документации Google API

Answer 1

Я пробовал ваш код без символов новой строки в URL-адресе, и у меня это сработало. Это связано с тем, что URL-адрес с новой строкой экранируется с помощью набора %20, что делает его недействительным.