Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import has from 'lodash.has';
class GoogleMaps extends React.Component {
constructor(props){
super(props);
this.state = {
mapReady: this.props.mapReady
};
}
static defaultProps = {
mapReady: false
}
_checkMap=()=>{
console.log('_checkMap');
var timeout = null;
if (!has(window, 'google.maps')) {
console.log()
if (timeout !== null) {
clearTimeout(timeout);
}
timeout = window.setTimeout(()=>{
this._checkMap();
}, 1000);
} else {
clearTimeout(timeout);
this.setState({
mapReady: true
})
}
}
_loadMap=()=>{
if (!has(window, 'google.maps')) {
var $map = $(React.findDOMNode(this.refs.map));
$map.append(
$('<script>').attr({
async: '',
defer: '',
src: `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`
})
);
this._checkMap();
}
}
componentDidMount(){
this._loadMap();
}
render(){
return (
<div className='sf-google-map' ref='map'>
<Component {...this.props} {...this.state} />
</div>
);
}
}
class Geotargeting extends React.Component {
...
render(){
return (
<GoogleMaps>
<div className='sf-geotargeting' id='map' ref='geotargeting' style={{height: 100, width: 100}}></div>
</GoogleMaps>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.