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”
