Google Map Marker as Reactjs Component

Question

This stackoverflow question is answered by @Omar Torres showing how to place a marker on a Google Map using Reactjs.

Working jsfiddle

I'd like to use an array to pull in multiple map markers, and I want the "marker" variable:

var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map});

To be a React Component so I can set a key and take advantage of the full performance of React's diff algo.

Here's my attempt, which isn't working:

/** @jsx React.DOM */
var ExampleMarker = React.createClass({
    render: function () {
        marker = new google.maps.Marker({position: new google.maps.LatLng(this.props.lat, this.props.lon), title: this.props.mls, map: this.props.map});
        return (
            <div>{marker}</div>
        );
    }
});

var ExampleGoogleMap = React.createClass({  
    getDefaultProps: function () {
        return {
            initialZoom: 8,
            mapCenterLat: 20.7114,
            mapCenterLng: -157.7964,
        };
    },

    componentDidMount: function () {
        var mapOptions = {
            center: this.mapCenterLatLng(),
            zoom: this.props.initialZoom
        },
        map = new google.maps.Map(this.getDOMNode(), mapOptions);

        this.setMarkers(map);

        this.setState({map: map});
    },

    mapCenterLatLng: function () {
        var props = this.props;
        return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng);
    },

    setMarkers: function (map) {

        this.props.markers.forEach(function(marker) {
            <ExampleMarker mls={marker.mls_no} lat={marker.latitude} lon={listing.longitude} key={marker.mls_no} map={map} />;
        }.bind(this));
    },

    componentDidUpdate: function () {
        var map = this.state.map;

        map.panTo(this.mapCenterLatLng());
    },

    render: function () {
        var style = {
            width: '100%',
            height: '100%'
        };

        return (
            <div className='map' style={style}></div>
        );
    }
});

var data = [
    {
        'title' : "marker1",
        'latitude' : "21.883851754",
        'longitude' : "-159.465845879"
    },
    {
        'title' : "marker2",
        'latitude' : "22.1640990399",
        'longitude' : "-159.310355405"
    },
    {
        'title' : "marker3",
        'latitude' : "22.0855947129",
        'longitude' : "-159.344410728"
    }
];


React.renderComponent(
     <ExampleGoogleMap markers={data} />,$('body')[0]
);

Am I on the right track?

Answer 1

I am not sure there is a way to diff DOM elements of markers with React as that is controlled by google's library.

With example from @Omar Tores, React is not aware of the marker DOM elements, all it knows is the div element rendered in the render method of ExampleGoogleMap . So the markers are not re-rendered at each re-render cycle. You have to handle the updates to markers in the componentDidUpdate method yourself.

With your example, you are creating ExampleMarker s in your setMarkers method which is called from componentDidMount method. Since these ExampleMarker s are not created in the render function, neither their render methods are executed nor they are going to be diff'ed at the subsequent renders of ExampleGoogleMap . Also wrapping the marker with a div element will not going to work.

All rendering logic of a marker is encapsulated within google library, therefore I think it not possible to diff it with Reacts algo unless google implements a react version of the library itself.

Answer 2

solution: . check this https://github.com/tomchentw/react-google-maps and please React is very very fast give keys to components showing list/rows items of data to help react.

//check my code below

 showMapMarkers({markers}){ ..use logic below } class WeatherList extends Component{ renderWeather(cityData, i){ const temps = cityData.list.map(weather => weather.main.temp); const pressures = cityData.list.map(weather => weather.main.pressure); const humidity = cityData.list.map(weather => weather.main.humidity); //distructuring // const lon = cityData.city.coord.lon; // const lat = cityData.city.coord.lat; const {lon, lat} = cityData.city.coord; return( <tr key={i}> <td><GoogleMap lon={lon} lat={lat} /></td> <td><Chart data={temps} color="orange" units="K"/></td> <td><Chart data={pressures} color="green" units="hPa"/></td> <td><Chart data={humidity} color="blue" units="%"/></td> </tr> ); } render(){ return ( <table className="table table-hover"> <thead> <tr> <th>City</th> <th>Temperature (K)</th> <th>Pressure (hPa)</th> <th>Humidity (%)</th> </tr> </thead> <tbody> {this.props.weather.map(this.renderWeather)} </tbody> </table> ); } }