Creando Mapas con Componentes de React
@jossDz
Herramientas:
Obtener el api key de Google
El primer paso es generar nuestra api key desde la consola de developer google
Habilitamos el servicio y seleccionamos el api deseada
Una vez habilitada generamos la key
Una vez habilitada generamos la key
MapContainer
El paso anterior fue de suma importancia por que necesitaremos el apikey en nuestro componente, más en específico en el export del mismo. Esto genera que se le pasen como props ciertos atributos que los componentes necesitan.
import React, { Component } from 'react'
import { GoogleApiWrapper } from 'google-maps-react'
class MapContainer extends Component {
state = {
selectedPlace: {
name: 'Ironhack'
}
}
render(){
return <Map google={this.props.google} zoom={14}>
<Marker name={'Current location'}/>
<InfoWindow>
<div>
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
</Map>
}
}
export default GoogleApiWrapper({
apiKey: ('api key')
})(MapContainer)deck
By Jose Carlos Correa Mandujano
