Wenn mehrere Markierungen auf einer Karte angezeigt werden, wie öffnet man nur ein Informationsfenster, wenn man auf eine Markierung klickt?

Question

Ich verwende react-google-maps, um eine Karte mit Markierungen anzuzeigen, und wenn Sie auf eine Markierung klicken, werden alle Informationsfenster geöffnet. Ich möchte nur das Informationsfenster eines Markers anzeigen, wenn ich darauf klicke und die anderen bleiben geschlossen.

Hier ist mein Code:

<GoogleMap 
     defaultZoom={15} 
     defaultCenter={{ lat: 51.508530, lng: -0.076132 }} 
    > 
     {props.places && props.places.map((place, i) => 
      <Marker onClick={props.onToggleOpen} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} > 
       {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}> 
        <div>{place.name}</div> 
       </InfoWindow>} 
      </Marker> 
     )} 
    </GoogleMap> 

Und ich Öffnen und Schließen des Infofenster mit diesem

import { compose, withProps, withStateHandlers, withHandlers, withState } from "recompose"; 

... 

withStateHandlers(() => ({ 
    isOpen: false, 
}), { 
    onToggleOpen: ({ isOpen, id }) =>() => ({ 
    isOpen: !isOpen, 
    }) 
}), 

Ich bin Mapping über alle Markierungen, und sie auf der Karte angezeigt werden. Wie könnte ich nur einen Marker InfoWindow öffnen? Here is a related question, aber es ist nicht mit React gemacht und verwendet nicht die react-google-maps.

Answer 1

Es ist eher eine React Frage. Sie können den Index eines angeklickten Marker an onToggleOpen übergeben und statt isOpen einen selectedPlace-Status verwenden, der den Index eines angeklickten Marker enthält, und diesen Index verwenden, um das richtige InfoWindow zu rendern. Hier

ist ein Beispiel (nicht vollständig getestet, aber man kann auf die Idee kommen):

/*global google*/ 
import React from "react" 
import { compose, withProps, withHandlers, withState, withStateHandlers } from "recompose" 
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps" 

const MyMapComponent = compose(
    withProps({ 
     googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places", 
     loadingElement: <div style={{ height: `100%` }} />, 
     containerElement: <div style={{ height: `400px` }} />, 
     mapElement: <div style={{ height: `100%` }} />, 
    }), 
    withScriptjs, 
    withGoogleMap, 
    withState('places', 'updatePlaces', ''), 
    withState('selectedPlace', 'updateSelectedPlace', null), 
    withHandlers(() => { 
     const refs = { 
      map: undefined, 
     } 

     return { 
      onMapMounted:() => ref => { 
       refs.map = ref 
      }, 
      fetchPlaces: ({ updatePlaces }) => { 
       let places; 
       const bounds = refs.map.getBounds(); 
       const service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED); 
       const request = { 
        bounds: bounds, 
        type: ['hotel'] 
       }; 
       service.nearbySearch(request, (results, status) => { 
        if (status == google.maps.places.PlacesServiceStatus.OK) { 
         console.log(results); 
         updatePlaces(results); 
        } 
       }) 
      }, 
      onToggleOpen: ({ updateSelectedPlace }) => key => { 
       updateSelectedPlace(key); 
      } 
     } 
    }), 
)((props) => { 
    console.log(props); 
    return (
     <GoogleMap 
      onTilesLoaded={props.fetchPlaces} 
      ref={props.onMapMounted} 
      onBoundsChanged={props.fetchPlaces} 
      defaultZoom={15} 
      defaultCenter={{ lat: 51.508530, lng: -0.076132 }} 
     > 
      {props.places && props.places.map((place, i) => 
       <Marker onClick={() => props.onToggleOpen(i)} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }}> 
        {props.selectedPlace === i && <InfoWindow onCloseClick={props.onToggleOpen}> 
         <div> 
          {props.places[props.selectedPlace].name} 
         </div> 
        </InfoWindow>} 
       </Marker> 
      )} 
     </GoogleMap> 
    ) 
}) 

export default class MyFancyComponent extends React.PureComponent { 
    render() { 
     return (
      <MyMapComponent /> 
     ) 
    } 
}