title: react js fetching of coordinate from google map
body: <p>I try to fetch the coordinate form google map after edit of my polygon in the map </p>
  
  <p>I need to edit the polygon and take the edit data to the back end.</p>
  
  <p>so I showed the JSON data in the map which will help me to drow the polygon.</p>
  
  <p>this is my code.</p>
  
  <pre><code>export default class Map extends Component {
   constructor(){
  super();
  this.state={
    data:[]
  }; 
  this.state.SampleVar = 'This is Global Variable.';
  }
   data = [];
  componentDidUpdate() {
  this.loadMap();  
  }  
  componentDidMount(){
  this.add();
  // this.loadMap();
  }
  
  add() {
  var controller = this;
   var id=this.props.id;
  fetch(`/mapdata/${id}`)
      // res =&gt;{ return res.json() ;
      .then(res =&gt; res.json())
      .then(dat =&gt; {  
  
          this.setState({ dat })
          console.log(dat);
          for (var i = 0; i &lt; dat.features.length; i++) {
              var coords = dat.features[i].geometry.coordinates[0];
              var latlons = coords.map(a =&gt; {
                  this.setState.data = { lat: a[1], lng: a[0] };
                  console.log([this.setState.data]);
                  //   return { lat: a[0], lng: a[1] }
                  return this.setState.data
              })
              this.data.push(latlons)
          }
      });
     }
  
  loadMap() {
  var info window;
  
  if (this.props &amp;&amp; this.props.google) { // checks to make sure that props have been passed
    const {google} = this.props; // sets props equal to google
    const maps = google.maps; // sets maps to google maps props
  
    const mapRef = this.refs.map; // looks for HTML div ref 'map'. Returned in render below.
    const node = ReactDOM.findDOMNode(mapRef); // finds the 'map' div in the React DOM, names it node
  
    const mapConfig = Object.assign({}, {
      center: {lat: 18.6716895369838, lng: 84.3602508679032}, // sets center of google map to NYC.
      zoom: 25, // sets zoom. Lower numbers are zoomed further out.
      mapTypeId: 'hybrid' // optional main map layer. Terrain, satellite, hybrid or roadmap--if unspecified, defaults to roadmap.
    })
  
    this.map = new maps.Map(node, mapConfig); // creates a new Google map on the specified node (ref='map') with the specified configuration set above.
    for (var i = 0; i &lt; this.data.length ; i++) {
      var bermudaTriangle = new google.maps.Polygon({
      paths: this.data[i],
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35, 
      editable: true
    });
  bermudaTriangle.setMap(this.map);
  bermudaTriangle.addListener('click', showArrays);
  infoWindow = new google.maps.InfoWindow();
  }
   function showArrays(e)
  {
      // console.log(1);
      var vertices = this.getPath();
  
      var contentString = '&lt;b&gt;Bermuda Triangle polygon&lt;/b&gt;&lt;br&gt;' +
          'Clicked location: &lt;br&gt;'  + e.latLng.lat() + ',' + e.latLng.lng() +
          '&lt;br&gt;';
          for (var i =0; i &lt; vertices.getLength(); i++) {
            var xy = vertices.getAt(i);
            contentString += '&lt;br&gt;' + 'Coordinate ' + i + ':&lt;br&gt;' + xy.lat() + ',' +
                xy.lng();
          } 
          console.log(contentString);
          infoWindow.setContent(contentString);
  
          infoWindow.setPosition(e.latLng);
  
          infoWindow.open(this.map);
  
      }
     }  
   }  
  
    onEdit(e){
   //   var google=this.props.google;
   //   for (var i = 0; i &lt; this.data.length ; i++) {
   //     var bermudaTriangle = new google.maps.Polygon({
   //     paths: this.data[i],
   //     strokeColor: '#FF0000',
   //     strokeOpacity: 0.8,
   //     strokeWeight: 2,
   //     fillColor: '#FF0000',
   //     fillOpacity: 0.35, 
   //     editable: true
   //   })
   // }
   //   var vtx = this.getPath();
   //       var constr
   //       for (var i =0; i &lt; vtx.getLength(); i++) {
   //         var xy = vtx.getAt(i);
   //         constr += '&lt;br&gt;' + 'Coordinate ' + i + ':&lt;br&gt;' + xy.lat() + ',' 
          +
   //             xy.lng();
   //       }
    var constr=10;
      console.log(constr);
  
   }
  
  render() 
  {
   const style = { // MUST specify dimensions of the Google map or it will not work. Also works best when a style is specified inside the render function and created as an object
      width: '65%', // 90vw basically means take up 90% of the width screen. px also works.
      height: '75vh' // 75vh similarly will take up roughly 75% of the height of the screen. px also works.
  
     }
  
    return ( // in our return function you must return a div with ref='map' and style.
      &lt;div  &gt;
        &lt;div id="map" ref="map" style={style}&gt;
        loading map...
        {this.loadMap()} &lt;/div&gt;
        &lt;button onClick={this.onEdit} &gt;Vry&lt;/button&gt;
      &lt;/div&gt;
     )
    }
  }
  </code></pre>
  
  <p>I try to fetch the coordinate form google map after edit of my polygon in the map</p>
  
  <p>I need to edit the polygon and take the edit data to the back end.</p>
  
  <p>so I showed the JSON data in the map which will help me to drow the polygon.</p>