Карты Google с React - «Требуются реквизиты loadingElement или googleMapURL отсутствует. Вам необходимо предоставить оба» - PullRequest
Новая
       10

Карты Google с React - «Требуются реквизиты loadingElement или googleMapURL отсутствует. Вам необходимо предоставить оба»

0 голосов
/ 03 декабря 2018

Днем все, я пытаюсь отрисовать google-карту (с булавками или маркерами) в РЕАКТЕ - я следую этому уроку:

https://medium.com/@morgannegagne/google-maps-with-react-951c12b723ad

Однако я продолжаю получатьта же ошибка:

"Обязательные реквизиты loadingElement или googleMapURL отсутствуют. Вам необходимо предоставить оба из них"

Я ЗНАЮ, что это не мой ключ googleAPI, как у другой базовой g-карты насайт, который я строю, и он хорошо.Но в разделе, где я пытаюсь добавить булавки «Travel Article» в gmap - это сложно: код выглядит так: 

import React from "react";
import ArticleMarker from "./ArticleMarker";
import ArticleMapContainer from "./ArticleMapContainer";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  } from 'react-google-maps';

const ArticlesMap = withScriptjs(withGoogleMap((props) =>{

  const markers = props.articles.map( article =>
                <ArticleMarker
                  key={article.uid}
                  doctor={article}
                  location={{lat: article.closestArticle.lat, lng: article.closestArticle.lon}}
                />);
  return (
      <GoogleMap
        defaultZoom={14}
        center={ { lat:  42.3601, lng: -71.0589 } }
        >
        {markers}
      </GoogleMap>
    );
  }
))

export default ArticlesMap;

Любые идеи будут высоко оценены - спасибо!

1 Ответ

0 голосов
/ 04 декабря 2018

Ошибка

Необходимые реквизиты loadingElement или googleMapURL отсутствует.Вам необходимо предоставить оба из них

, поскольку реквизиты :

  • googleMapURL: String - URL-адрес API Карт Google
  • loadingElement: ReactElement - элемент, который визуализируется до завершения загрузки библиотеки Google Карт

обязательный для withScriptjs HOC

Например: 

<ArticlesMap 
  googleMapURL="https://maps.googleapis.com/maps/api/js?key=--YOUR-KEY-GOES-HERE--"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/>

Демо

...