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

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

Answer 2

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 ExampleMarkers in your setMarkers method which is called from componentDidMount method. Since these ExampleMarkers 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.