My React/Redux ponent for working with Google Maps:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'

import { changeMapCenter } from '../actions'

class Map extends Component {

  ponentDidMount() {
    let script = document.createElement('script')

    script.setAttribute('type', 'text/javascript')
    script.setAttribute('src', ';callback=initMap')
    document.getElementsByTagName('head')[0].appendChild(script)

    window.initMap = () => {
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: this.props.defaultCenter,
        zoom: this.props.defaultZoom
      });

      this.map.addListener('center_changed', (event) => {
        let center = {
          lat: this.map.getCenter().lat(),
          lng: this.map.getCenter().lng()
        }
        this.props.onMapCenterChanging(center)
      });
    }
  }

  render() {
    return (
      <div id='map'></div>
    );  
  }
}

const mapStateToProps = (state) => {
  return {
    mapPoints: state.mapPoints
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onMapCenterChanging: (center) => {
      dispatch(changeMapCenter(center))
    }    
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Map)

As you can see now this ponent just initializes map and listens map center changing. Now I need render some markers (mapPoints). From Google API Documentation I can do it (for example):

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Click to zoom'
  });

But how can I do in 'React-style'? Because drawing marker is not 'render' HTML, it's just calling JS Google Maps API function. I can put this logic in 'initMap' function, but my 'mapPoints' can change. Should I put JS logic (removing deleted points / draw new points) in 'render' function? Thanks!

My React/Redux ponent for working with Google Maps:

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'

import { changeMapCenter } from '../actions'

class Map extends Component {

  ponentDidMount() {
    let script = document.createElement('script')

    script.setAttribute('type', 'text/javascript')
    script.setAttribute('src', 'https://maps.googleapis./maps/api/js?key=AIzaSyCXg-YGJF&callback=initMap')
    document.getElementsByTagName('head')[0].appendChild(script)

    window.initMap = () => {
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: this.props.defaultCenter,
        zoom: this.props.defaultZoom
      });

      this.map.addListener('center_changed', (event) => {
        let center = {
          lat: this.map.getCenter().lat(),
          lng: this.map.getCenter().lng()
        }
        this.props.onMapCenterChanging(center)
      });
    }
  }

  render() {
    return (
      <div id='map'></div>
    );  
  }
}

const mapStateToProps = (state) => {
  return {
    mapPoints: state.mapPoints
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onMapCenterChanging: (center) => {
      dispatch(changeMapCenter(center))
    }    
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Map)

As you can see now this ponent just initializes map and listens map center changing. Now I need render some markers (mapPoints). From Google API Documentation I can do it (for example):

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Click to zoom'
  });

But how can I do in 'React-style'? Because drawing marker is not 'render' HTML, it's just calling JS Google Maps API function. I can put this logic in 'initMap' function, but my 'mapPoints' can change. Should I put JS logic (removing deleted points / draw new points) in 'render' function? Thanks!

• javascript
• google-maps
• google-maps-api-3
• reactjs
• redux

Share Improve this question Follow asked Jun 11, 2016 at 20:53 malcoaurimalcoauri 12.2k2828 gold badges8888 silver badges141141 bronze badges 1

• 4 I get a google is undefined error using your code. – Tyler Zika Commented Mar 19, 2017 at 18:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Typically, a React ponent that wraps up some imperative API (like a jQuery widget or similar) does so by not rendering anything (or just rendering a minimal bit of content, like a container div), and then updates the wrapped widget during the React lifecycle methods. There's actually some ponents out there that wrap up the Google Maps API already, and in particular, https://www.fullstackreact./articles/how-to-write-a-google-maps-react-ponent/ walks you through how to do so.