score:1

Accepted answer

you are directly mutating the state like,

this.state.eventlist = requestresponse.data; //direct mutation

you never mutate state like this, because it is not the right way to change state and it will not re-render your component.

you must use setstate to change your state, which will cause a re-render and your component will get data.

this.setstate({eventlist : requestresponse.data})

also make sure you are adding your child component when your data is ready,

{this.state.eventlist.length > 0 && <googleapiwrapper eventlist={this.state.eventlist} ></googleapiwrapper>}

score:0

main.js

import react from 'react';
import googlemapswrapper from './googlemapswrapper.js';
import { marker } from 'react-google-maps';
import markerclusterer from "react-google-/lib/components/addons/markerclusterer";

class demoapp extends react.component {
    componentwillmount() {
        this.setstate({ markers: [] })
    }

    componentdidmount() {
       const url = [
           // length issue
           `https://gist.githubusercontent.com`,
           `/farrrr/dfda7dd7fccfec5474d3`,
           `/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json`
           ].join("")

       fetch(url)
       .then(res => res.json())
       .then(data => {
           this.setstate({ markers: data.photos });
       });
    }

    render () {
        return (
            <googlemapswrapper
                googlemapurl="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
                loadingelement={<div style={{ height: `100%` }} />}
                containerelement={<div style={{ height: `400px` }} />}
                mapelement={<div style={{ height: `100%` }}
                defaultzoom={3}
                defaultcenter={{ lat: 25.0391667, lng: 121.525 }}>
                <markerclusterer
                    averagecenter
                    enableretinaicons
                    gridsize={60}>
                    {this.state.markers.map(marker => (
                        <marker
                            key={marker.photo_id}
                            position={{ lat: marker.latitude, lng: marker.longitude }}
                        />
                    ))}
                </markerclusterer>
            </googlemapswrapper>
         );
    }

}

googlemapswrapper.js

import react from 'react';
import { googlemap,withgooglemap,withscriptjs } from 'react-google-maps';

export default const googlemapswrapper = withscriptjs(withgooglemap(props => {
  return <googlemap {...props} ref={props.onmapmounted}>{props.children}</googlemap>
}));

follow https://github.com/tomchentw/react-google-maps/issues/636


Related Query

More Query from same tag