Google Map Api Marker ne montre pas avec Reactjs

Question

J'essaie d'afficher une carte google avec un marqueur. J'utilise React.js. La carte affiche dans l'emplacement correct, mais le marqueur ne montre pas et je reçois plusieurs « objet n'est pas extensible » erreur dans la console du navigateur

Le code ressemble à ce

/** @jsx React.DOM */ 
var Map = React.createClass({ 
    initialize: function() { 
    var lat = parseFloat(this.props.lat); 
    var lng = parseFloat(this.props.lon); 
    var myPosition = new google.maps.LatLng(lat,lng); 
    var mapOptions = { 
    center: myPosition, 
    zoom: 8 
    }; 
    var map = new google.maps.Map(this.getDOMNode(), mapOptions); 
    var marker = new google.maps.Marker({position: myPosition, title: 'Hi', map: map}); 
    }, 
    componentDidMount: function(){ 
this.initialize(); 
    }, 
    render:function(){ 
    return <div className="map"/> 
    } 
}); 

erreurs détaillées de la console:

Uncaught TypeError: Impossible d'ajouter la propriété k, objet n'est pas extensible VM3577: 92

Uncaught TypeError: Impossible d'ajouter la propriété onerror, objet n'est pas main.js extensible: 3

Uncaught TypeError: Impossible d'ajouter la propriété k, objet n'est pas extensible VM3577: 92

Uncaught TypeError: Impossible de lire le 'style' propriété de VM3577 non définie: 69

Uncaught TypeError: Impossible d'ajouter la propriété onerror, l'objet n'est pas extensible

Answer 1

Craig Savolainen a une bonne explication sur l'utilisation de Google Maps en tant que composant React here, l'essentiel pour l'exemple est here. J'acomplished le marqueur rendu avec le code suivant:

var ExampleGoogleMap = React.createClass({ 
    getDefaultProps: function() { 
     return { 
      initialZoom: 8, 
      mapCenterLat: 43.6425569, 
      mapCenterLng: -79.4073126, 
     }; 
    }, 
    componentDidMount: function (rootNode) { 
     var mapOptions = { 
      center: this.mapCenterLatLng(), 
      zoom: this.props.initialZoom 
     }, 
     map = new google.maps.Map(document.getElementById('react-valuation-map'), mapOptions); 
     var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map}); 
     this.setState({map: map}); 
    }, 
    mapCenterLatLng: function() { 
     var props = this.props; 
     return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng); 
    }, 
    render: function() { 
     return (
      <div className='map-gic'></div> 
     ); 
    } 
}); 

travail jsFiddle