Así que he estado tratando de implementar una instancia de Google Maps en mi aplicación NextJS, sin embargo, conseguí que la mayoría de las cosas funcionaran, quiero mostrar los datos que estoy obteniendo de una fuente externa como 'marcadores' en el mapa.

Para esto, he estado usando el siguiente código, pero los marcadores no parecen aparecer.

 import { Map, InfoWindow, Marker, GoogleApiWrapper, showInfoWindow } from 'google-maps-react'; import React, { Component } from 'react'; export class MapContainer extends Component { constructor(props) { super(props); this.state = { data: null, showingInfoWindow: false, activeMarker: {}, selectedPlace: {}, }; } componentDidMount() { // make fetch request fetch('api/twitter/search') .then(response => response.json()) .then(data => this.setState({ data })); } onMarkerClick = (props, marker, e) => this.setState({ selectedPlace: props, activeMarker: marker, showingInfoWindow: true }); onMapClicked = (props) => { if (this.state.showingInfoWindow) { this.setState({ showingInfoWindow: false, activeMarker: null }) } }; render() { const { data } = this.state; console.log(data) return ( <div> <Map google={this.props.google} onClick={this.onMapClicked} width={50} height={50} center={{ lat: 40.854885, lng: -88.081807 }}> { data?.data.map((st) => ( <> ( { st?.place && <Marker title={st?.user.name} name={'SOMA'} position={{ lat: 40.854885, lng: -88.081807 }} key={st?.id} /> } ) </> )) } </Map> </div> ); } } export default GoogleApiWrapper({ apiKey: ('#') })(MapContainer)

El mapa aparece pero no hay marcadores, me gustaría mostrar todos los elementos extraídos de la API en el mapa, no estoy seguro si voy por el camino correcto al usar un mapa de javascript para mostrar una cantidad de marcadores