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 }} />
Top comments (0)