React with airtable more than 100 records for a marker on map

I’m try to make a marker plot on Google map via react which pull data from Airtable.

when I made a first code it was successful to retrieve all records to console.log but it a multi array and it plot the marker from the last array only (100 per array - I understood it a max 100 records per request).

Then I made a second code which it can get all records to one array but it was not plot any marker to Google map.

The array structure look same on both console.log but why I cannot plot the marker from second code.

Could anyone help me please.

thank you.

First code;

       import React, {  Component } from 'react';
       import Marker from './Marker';
       import GoogleMapReact from 'google-map-react';
       import Airtable from 'airtable';

       const base = new Airtable({ apiKey: 'Airtable Key' }).base('appuv1eI3CeJ2Hp84');

       class App extends Component {
         constructor(props) {
          super(props);
          this.state = {
          records: [],   
                       };
        }

        //get the data from airtable
       componentDidMount() { 
         base('S_IN01').select({view: 'Grid view'}).eachPage ((records, fetchNextPage) => {     
          this.setState
           ({ records});
           console.log(records);
           fetchNextPage();
           })
           }


        render() {  
         const getMapOptions = (maps: any) => {
         return {
         disableDefaultUI: false,
         mapTypeControl: true,
         streetViewControl: false,
         mapTypeId: 'satellite',
         labels: false,
         styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'on' }]}],
         };
         };
         let center = {
         lat: 19.924042,
         lng: 99.214714
       };

     return (   
       <div className="app">
       <div style={{ 
       height: '80vh', 
       width: '99%',
       margin: 10,  
       }}>   

       <GoogleMapReact
         bootstrapURLKeys={{ key: 'Google API Key' }}
         defaultCenter={center}
         defaultZoom={13}
         options={getMapOptions}      
       >   
   { this.state.records.map((point) => {
      // Map markers
      return (              
        <Marker 

          key={point.id }              
          lat={point.fields['S_PRE_X']}
          lng={point.fields['S_PRE_Y']}
          //name={point.fields['S_STATION']}
          //color={point.fields['S_COLOR']}
        />                
      );
      })}

      </GoogleMapReact>         
      </div>
           </div>       
         ); 
         }
         }

        export default App;

Second code

       import React, {  Component } from 'react';
       import Marker from './Marker';
       import GoogleMapReact from 'google-map-react';
       import Airtable from 'airtable';
     
       const base = new Airtable({ apiKey: 'Airtable Key' }).base('appuv1eI3CeJ2Hp84');
     
       class App extends Component {
         constructor(props) {
          super(props);
          this.state = {
          records: [],   
                       };
        }

        //get the data from airtable
       componentDidMount() { 
         base('S_IN01').select({view: 'Grid view'}).all().then(records => {
         // records array will contain every record in Main View.

           console.log(records);
         }).catch(err => {
         // Handle error.
           })
           }


        render() {  
         const getMapOptions = (maps: any) => {
         return {
         disableDefaultUI: false,
         mapTypeControl: true,
         streetViewControl: false,
         mapTypeId: 'satellite',
         labels: false,
         styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'on' }]}],
         };
         };
         let center = {
         lat: 19.924042,
         lng: 99.214714
       };

     return (   
       <div className="app">
       <div style={{ 
       height: '80vh', 
       width: '99%',
       margin: 10,  
       }}>   
     
       <GoogleMapReact
         bootstrapURLKeys={{ key: 'Google API Key' }}
         defaultCenter={center}
         defaultZoom={13}
         options={getMapOptions}      
       >   
            { this.state.records.map((point) => {
               // Map markers
               return (              
                 <Marker 
     
                   key={point.id }              
                   lat={point.fields['S_PRE_X']}
                   lng={point.fields['S_PRE_Y']}
                   //name={point.fields['S_STATION']}
                   //color={point.fields['S_COLOR']}
                 />                
               );
               })}

       </GoogleMapReact>         
           </div>
           </div>       
         ); 
         }
         }

        export default App;

Result from first code;

(100) [Record, Record, …Record, Record],
(100) [Record, Record, …Record, Record],
(100) [Record, Record, …Record, Record]
0: Record
. _table: Table {_base: Base, id: null, name: “S_IN01”, find: ƒ, select: ƒ, …}
. id: “reckJxdkDvW0c4CIH”
. _rawJson: {id: “reckJxdkDvW0c4CIH”, fields: {…}, createdTime: “2020-01-22T12:39:47.000Z”}
. fields:
1. TYPE: “S”
2. S_LINE: “1008”
3. S_POINT: “5064”
4. S_STATION: “10085064”
5. S_PRE_X: “19.95118”
6. S_PRE_Y: “99.1727”
7. location: “19.95118, 99.1727”

Result from second code;

. (300) [Record, Record, … Record, Record, …]
. [0 … 99]
. [100 … 199]
. [200 … 299]
. 200: Record
. _table: Table {_base: Base, id: null, name: “S_IN01”, find: ƒ, select: ƒ, …}
. id: “reckJxdkDvW0c4CIH”
. _rawJson: {id: “reckJxdkDvW0c4CIH”, fields: {…}, createdTime: “2020-01-22T12:39:47.000Z”}
. fields:
1. TYPE: “S”
2. S_LINE: “1008”
3. S_POINT: “5064”
4. S_STATION: “10085064”
5. S_PRE_X: “19.95118”
6. S_PRE_Y: “99.1727”

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.