usando GoogleMAP en REACT + GoogleApiWrapper

creado con el fin de reutilizarse en futuros proyectos :)

1 Mapa Basico en React

Crear la aplicacion

 npx create-react-app my-app

Ingresamos a la carptea e instalar google map react

 npm install --save google-maps-react

dentro creamos un componente X.js que incluirá el mapa y otros datos

import React, { Component } from 'react'; //basicos
import { Map, GoogleApiWrapper } from 'google-maps-react'; //de google

 export class Mapa extends Component {

     render() {
         return (
             <Map
                 style={{ width: '100%', height: '100%' }}
                 initialCenter={{ lat: -18.4745998, lng: -70.2979202 }}
                 zoom={14}
                 google={this.props.google}
             >

             </Map>
         );
     }
 }
 export default GoogleApiWrapper({
     apiKey: 'miapikeypersonal'
 })(Mapa);

exportamos el componente X.js en App.js

yarn-start y ya podemos ver el contenido

2 MARK en google map

importar elementos necesarios

   import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

agregar una marca en el mapa

    <Marker position={{ lat: -18.4745998, lng: -70.2979202 }} />