React Google Maps标记图标不显示问题求助

Hey there! Let's dig into why your markers aren't appearing on the map—even though you can see their locations logged in the console. I’ve reviewed your code and here are the key fixes and checks to get those markers displaying:

1. You’re not returning the Marker component in your map loop #

This is the most critical issue right now. When you use props.markers.map(), you’re defining the Marker component but not returning it, so nothing gets rendered to the map.

Fix: #

Add a return statement inside the map callback, or use implicit return with parentheses (instead of curly braces) for cleaner code:

Original code snippet:

props.markers.map(marker => {
  console.log(marker.location);
  <Marker {...marker} key={marker.place_id} position={marker.location} title={marker.title} icon={{ url: 'icons/icon.png' }} onClick={props.onToggleOpen} >
    {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
      <div>Open</div>
    </InfoWindow>}
  </Marker>
})

Updated with explicit return:

props.markers.map(marker => {
  console.log(marker.location);
  // Add this return statement to render the Marker
  return (
    <Marker 
      {...marker} 
      key={marker.place_id} 
      position={marker.location} 
      title={marker.title} 
      icon={{ url: 'icons/icon.png' }} 
      onClick={props.onToggleOpen} 
    >
      {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
        <div>Open</div>
      </InfoWindow>}
    </Marker>
  );
})

Or use implicit return (cleaner shorthand):

props.markers.map(marker => (
  <Marker 
    {...marker} 
    key={marker.place_id} 
    position={marker.location} 
    title={marker.title} 
    icon={{ url: 'icons/icon.png' }} 
    onClick={props.onToggleOpen} 
  >
    {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
      <div>Open</div>
    </InfoWindow>}
  </Marker>
))

2. Verify your marker icon path is correct #

The path 'icons/icon.png' might not point to the right location in your project structure, which can make markers invisible (even if they’re technically rendered).

Checks: #

• If your icons folder is inside the src directory (same level as your Map component), use require to import the icon properly:

  icon={{ url: require('./icons/icon.png').default }}
  

• If icons is in the project’s public folder, use an absolute path starting with /:

  icon={{ url: '/icons/icon.png' }}
  

• To rule out path issues temporarily, test with a Google default marker icon:

  icon="http://maps.google.com/mapfiles/ms/icons/red-dot.png"
  

If this default icon shows up, your custom icon path is definitely the problem.

3. Confirm marker.location has the right format #

Make sure marker.location is an object with explicit lat and lng properties, like:

{ lat: 52.229676, lng: 21.012229 }

If your API returns coordinates as an array (e.g., [lat, lng]), adjust the position prop to match the required format:

position={{ lat: marker.location[0], lng: marker.location[1] }}

4. Fix shared InfoWindow state (optional but recommended) #

Right now, your isOpen state is global—clicking any marker will show/hide InfoWindows for all markers at once. To make each marker’s InfoWindow independent:

Update the state handler: #

withStateHandlers(() => ({
  activeMarkerId: null, // Track the ID of the currently open marker
}), {
  onToggleOpen: ({ activeMarkerId }) => (markerId) => ({
    activeMarkerId: activeMarkerId === markerId ? null : markerId,
  })
})

Adjust the Marker and InfoWindow: #

<Marker 
  {...marker} 
  key={marker.place_id} 
  position={marker.location} 
  title={marker.title} 
  icon={{ url: 'icons/icon.png' }} 
  onClick={() => props.onToggleOpen(marker.place_id)} // Pass the marker's unique ID
>
  {/* Only show InfoWindow if this marker is the active one */}
  {props.activeMarkerId === marker.place_id && (
    <InfoWindow onCloseClick={() => props.onToggleOpen(marker.place_id)}>
      <div>Open</div>
    </InfoWindow>
  )}
</Marker>

Start with fixing the map loop return issue first—it’s the most likely reason your markers aren’t showing up. Once that’s done, test the icon path and location format if needed.

内容的提问来源于stack exchange，提问作者Iwona Hajczewska