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 }} />