Agregar marcador a Google Maps en google-map-react

Solución:

Editar:

Dado que esta respuesta se publicó, los documentos (y probablemente, la API) de la GoogleMapReact Se cambió el elemento para apoyar a los niños. Cualquier niño con lat y lng se renderizaría en la ubicación correspondiente en el mapa, como también lo indica la respuesta de @ Jobsamuel.

los onGoogleApiLoaded La devolución de llamada no debe usarse para este propósito, ya que es inferior al estilo declarativo y no se volvería a ejecutar si se realizan cambios en el mapa.

---

Respuesta original (desactualizada):

Esto puede no estar del todo claro a partir de la descripción en el archivo Léame, pero la maps argumento es, de hecho, el objeto de la API de mapas (y map es, por supuesto, la instancia actual de Google Map). Por lo tanto, debes pasar ambos a tu método:

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

y usarlos:

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

Agregar un marcador en su mapa no es tan fácil como nos gustaría, principalmente debido a los documentos confusos, pero aquí tiene 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>
}

import React from 'react';
import GoogleMapReact from 'google-map-react';

const GoogleMaps = ({ latitude, longitude }) => {
 const renderMarkers = (map, maps) => {
  let marker = new maps.Marker({
  position: { lat: latitude, lng: longitude },
  map,
  title: 'Hello World!'
  });
  return marker;
 };

 return (
   <div style={{ height: '50vh', width: '100%' }}>
    <GoogleMapReact
      bootstrapURLKeys={{ key: 'YOUR KEY' }}
      defaultCenter={{ lat: latitude, lng: longitude }}
      defaultZoom={16}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}
    >
    </GoogleMapReact>
   </div>
 );
};

export default GoogleMaps;

---

---

Utiliza Nuestro Buscador