CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3reactjsredux
malcoauri
malcoauri

Reputation: 12189

Google Maps React/Redux component

My React/Redux component for working with Google Maps:

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

import { changeMapCenter } from '../actions'

class Map extends Component {

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

    script.setAttribute('type', 'text/javascript')
    script.setAttribute('src', 'https://maps.googleapis.com/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 component 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!

Upvotes: 4

Views: 5681

Answers (1)

markerikson
markerikson

Reputation: 67469

Typically, a React component 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 components out there that wrap up the Google Maps API already, and in particular, https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ walks you through how to do so.

Upvotes: 6

Related Questions