javascript - address - Adición de marcador a Google Maps en google-map-react

react google-< maps

Question

Estoy utilizando el paquete NPM de google-map-react para crear un mapa de Google y varios marcadores.

Pregunta: ¿Cómo podemos agregar los marcadores predeterminados de Google Maps al mapa?

A partir de este problema de Github , parece que necesitamos acceder a la API interna de Google Maps mediante la función onGoogleApiLoaded .

Refiriéndonos a un ejemplo de los documentos de la API JS de Google Maps , podemos usar el siguiente código para representar el marcador, pero ¿cómo definimos las referencias para map ?

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: ''Hello World!''
});

Código actual:

renderMarkers() {
    ...
}

render() {
    return (
        <div style={{''width'':800,''height'':800}}>
            <GoogleMap
                bootstrapURLKeys={{key: settings.googleMapApiKey}}
                defaultZoom={13}
                defaultCenter={{ 
                    lat: this.props.user.profile.location.coordinates[1], 
                    lng: this.props.user.profile.location.coordinates[0]
                }}
                onGoogleApiLoaded={({map, maps}) => this.renderMarkers()}
                yesIWantToUseGoogleMapApiInternals
            >
            </GoogleMap>
        </div>
    );
}

Answer 1

Agregar un marcador en tu mapa no es tan fácil como nos gustaría, principalmente porque los documentos confusos, pero aquí tienes un ejemplo súper fácil:

const Map = props => {
  return (
    <GoogleMapReact
     bootstrapURLKeys={{ props.key }}
     defaultCenter={{lat: props.lat, lng: props.lng}}
     defaultZoom={props.zoom}>

       {/* This is the missing part in docs:
         *
         * Basically, you only need to add a Child Component that
         * takes ''lat'' and ''lng'' Props. And that Component should
         * returns a text, image, super-awesome-pin (aka, your marker).
         *
         */}
       <Marker lat={props.lat} lng={props.lng}} />
    </GoogleMapReact>
  )
}

const Marker = props => {
  return <div className="SuperAwesomePin"></div>
}

Answer 2

Es posible que esto no quede del todo claro en la descripción del archivo Léame, pero el argumento de los maps es, de hecho, el objeto API de los mapas (y, por supuesto, el mapa es la instancia actual de Google Map). Por lo tanto, debes pasar ambos a tu método:

onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}

y úsalos:

renderMarkers(map, maps) {
  let marker = new maps.Marker({
    position: myLatLng,
    map,
    title: ''Hello World!''
  });
}