I am calling out to google places and am getting back the correct places but when i go to display them on the map, only a half of the returned places are being displayed. I know there is a limit of 20 places per "screen" that google allows but why is it not hitting at least 20 places?
const urlCafe =
"https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=" +
latitude +
"," +
longitude +
"&radius=" +
radMetter +
"&type=" +
cafeKeyword +
"&keyword=" +
coffeeKeyword +
"&key=" +
config.API_KEY;
let cafePlaces = await fetch(urlCafe)
.then(res => {
return res.json();
})
.then(res => {
for (let googlePlace of res.results) {
if (
googlePlace &&
googlePlace.opening_hours &&
googlePlace.business_status &&
googlePlace.business_status != "CLOSED_TEMPORARILY"
) {
let place = {};
let lat = googlePlace.geometry.location.lat;
let lng = googlePlace.geometry.location.lng;
let coordinate = {
latitude: lat,
longitude: lng,
};
place["placeType"] = "cafe";
place["vicinity"] = googlePlace.vicinity;
place["open"] = googlePlace.opening_hours.open_now;
place["placeTypes"] = googlePlace.types;
place["rating"] = googlePlace.rating;
place["coordinate"] = coordinate;
place["placeId"] = googlePlace.place_id;
place["user_ratings_total"] = googlePlace.user_ratings_total;
place["placeName"] = googlePlace.name;
placesArray.push(place);
}
}
return placesArray;
});
<MapView
ref={mapRef}
onMapReady={() => {
if (mapRef.current) {
mapRef.current.fitToCoordinates(
placesArray.map(location => location.coordinate),
{
edgePadding: {
top: 10,
right: 10,
bottom: 10,
left: 10,
},
animated: true,
}
);
}
}}
style={styles.map}
showsUserLocation={true}
onRegionChange={e => onRegionChange(e)}
>
{placesArray && placesArray.length > 0
? placesArray.map((marker, key) => {
if (marker == undefined) return null;
return (
<Marker
coordinate={marker.coordinate}
title={marker.placeName}
key={key}
....