0

Я разрабатываю приложение на meteor.js и мне нужно подключить скрипт с Google maps только для одной страницы с картами. Я подключаю его в конструкторе класса.

class Map extends React.Component {
  constructor() {
    super();
    const script = document.createElement("script");
    script.src = "https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initMap";
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);

    this.panToArcDeTriomphe = this.panToArcDeTriomphe.bind(this);
  }
  componentDidMount() {
    this.map = new google.maps.Map(this.refs.map, 
       { center: {lat:48.858608, lng:2.294471}, zoom:16 }
    );
  }
  panToArcDeTriomphe() {
    console.log(this)
    this.map.panTo({ lat:48.873947, lng:2.295038});
  }
  render() {
    const mapStyle = {width:500, height:300, border:'1px solid black' };    
    return (
      <div>
        <button onClick={this.panToArcDeTriomphe}>Go to</button>
        <div ref="map" style={mapStyle}>I should be a map</div>
      </div>
    );
  }
}
ReactDOM.render(<Map />, document.getElementById('root'));

Но получаю такую ошибку:

Uncaught ReferenceError: google is not defined

Код этого примера на codepen: http://codepen.io/alex183/pen/XpJJPz?editors=0011

Не могу понять в чем проблема, на странице скрипт виден, но при этом карты не работают. введите сюда описание изображения

11
  • 1
    Случаем, библиотека у вас подключается не после скрипта, в котором используется?
    – VenZell
    4 янв 2017 в 20:36
  • Какая библиотека? Вроде ничего лишнего не подключаю, конструктор я так понимаю инициализируеться первым, поле него все остальное. Скрипт вроде на странице рисуется но на этом все. Не работает.
    – alex10
    4 янв 2017 в 20:39
  • 1
    Повторюсь, вы используете https://maps.googleapis.com/maps/api/js ДО или ПОСЛЕ того, как подключили? Скрипт с ее использованием выше или ниже в DOM дереве?
    – VenZell
    4 янв 2017 в 20:42
  • Сейчас вставил в head в любом случае все остальные скрипты идут ниже. Если я правильно понял вопрос. Картинку обновил.
    – alex10
    4 янв 2017 в 20:57
  • 1
    И все же остается вероятность, что библиотека не успела загрузиться, добавленная таким образом.
    – VenZell
    4 янв 2017 в 21:00

1 ответ 1

0

Решение:

class Map extends Component {
  constructor(props) {
    super(props);
    this.panToArcDeTriomphe = this.panToArcDeTriomphe.bind(this);
  }
  componentDidMount(){
    url = "https://maps.googleapis.com/maps/api/js?key=api_key&callback=initMap";
    loadScript(url, ()=>{
      this.map = new google.maps.Map(this.refs.map, { center:{ lat:48.858608, lng:2.294471 }, zoom:16});
    })
  }
  panToArcDeTriomphe() {
    console.log(this);
    this.map.panTo({ lat:48.873947, lng:2.295038 });
  }
  render() {
    const mapStyle = {width:500, height:300, border:'1px solid black'};
    return (
      <div>
        <button onClick={this.panToArcDeTriomphe}>Go to</button>
        <div ref="map" style={mapStyle}>I should be a map</div>
      </div>
    );
  }
}

function loadScript(url, callback) {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  script.onreadystatechange = callback;
  script.onload = callback;
  head.appendChild(script);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.