Estoy tratando de poner un mapa de Google en una descripción posterior de la página para comenzar en un proyecto de reacción, y estoy teniendo problemas. He creado google map en otro componente y llamo a ese componente googlemap al componente principal.

El mapa se carga correctamente, pero el problema con el mapa de borde se está saliendo de la sección. También adjunto imagen. Creo que el problema es con la altura del componente de página

const Con = () => {


    return (
        <div className="Contact">
            <Container>
                <Row>
                    <Col xs lg="8">
                        <h1><strong>Contact Us</strong></h1>
                        <br></br>
                        <div>
                        <h5><strong>For any enquiry, please contact Andrew Lal Ji at lalnco@yahoo.co.uk</strong></h5>

                        <p><strong>Coming by Car: </strong></p>
                        <p>Please use post code G3 7LH for Sat Nav.</p>

                        <p><strong>Coming by Bus:</strong></p>

                        <br></br>
                        </div>
                        <div >
                        < MapWrapper />
                        </div>
                    </Col>

                </Row>
            </Container>
        </div>
    );
};

Ahora usé con.js en el módulo App.js

Aquí está mi componente google_map.js:


const mapStyles = {
    width: '100%',
    height: '400px'
  }

export class MapContainer extends Component {
  render() {
    return (
      <Map google={this.props.google} 
        zoom={15}
        style={mapStyles}
        initialCenter={{ lat: 55.866701, lng: -4.279272}}
        >

        <Marker position={{ lat: 55.866701, lng: -4.279272}} />

      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("mykey")
})(MapContainer)
1
Akhi21 17 abr. 2020 a las 21:05

2 respuestas

La mejor respuesta

El problema se produjo debido al CSS predeterminado establecido por la biblioteca de mapas. Principalmente debido a la propiedad position:absolute;

Utilicé mi propia clase personalizada y actualicé el CSS.

Nota: he usado Styled-Jsx para usar rápidamente mi CSS. Puede usar el mismo CSS en un archivo CSS separado e importarlo aquí. O haga npm install --save styled-jsx

Aquí están los cambios de código en su componente de archivo LetChangeMap.js (MapContainer):

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

const mapStyles = {
    width: '100%',
    height: '400px',
  }

export class MapContainer extends Component {
  render() {
    return (
      
      <Map google={this.props.google} 
        zoom={15}
        className="mapContainerWrapper"
        style={mapStyles}
        initialCenter={{ lat: 55.866701, lng: -4.279272}}
        >
 
        <Marker className="mapContainerMarker" position={{ lat: 55.866701, lng: -4.279272}} />

    <style jsx>{`
        .mapContainerWrapper{
          position:relative !important;
        }

        .mapContainerWrapper div:first-child{
          position:relative !important;
        }
    `}</style>
      </Map>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: ("key")
})(MapContainer)

Enlace StackBlitz: https://stackblitz.com/edit/map-library-issue

Salida de StackBlitz: https://stackblitz.com/edit/map-library-issue

2
Imran Rafiq Rather 17 abr. 2020 a las 20:49

Use otro componente <Row><Col> y agregue un componente de mapa dentro de ese:

<Container>
    <Row>
        <Col xs lg="8">
            <h1><strong>Contact Us</strong></h1>
            <br></br>
            <div>
            <h5><strong>For any enquiry, please contact Andrew Lal Ji at lalnco@yahoo.co.uk</strong></h5>

            <p><strong>Coming by Car: </strong></p>
            <p>Please use post code G3 7LH for Sat Nav.</p>

            <p><strong>Coming by Bus:</strong></p>
            </div>
        </Col>
    </Row>
    <Row>
        <Col xs lg="8">
            <MapWrapper />
        </Col>
    </Row>
</Container>
0
Anurag Srivastava 17 abr. 2020 a las 18:11