I am developing an application on meteor.js and I need to connect a script with Google maps for only one page with maps. I connect it to the class constructor.

 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'));

But I get this error:

Uncaught ReferenceError: google is not defined

The code for this example is in codepen: http://codepen.io/alex183/pen/XpJJPz?editors=0011

I can not understand what the problem is, the script is visible on the page, but the maps do not work. enter image description here

  • one
    By chance, the library is not connected to you after the script in which it is used? - VenZell
  • What library? It seems that I do not connect anything superfluous, as I understand it, the constructor is initialized first, the field is everything else. The script seems to be drawn on the page but that's all. Does not work. - alex10
  • one
    Again, are you using https://maps.googleapis.com/maps/api/js BEFORE or AFTER you have hooked up? Is the script using it higher or lower in the DOM tree? - VenZell
  • Now inserted into the head in any case, all the other scripts go below. If I understand the question correctly. Updated the picture. - alex10
  • one
    And yet there remains the possibility that the library did not have time to load, added in this way. - VenZell

1 answer 1

Decision:

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