A
A
asmut2020-12-11 10:50:09
Google Maps
asmut, 2020-12-11 10:50:09

Problem with passing parameters to google maps?

Good afternoon, ladies and gentlemen.
I'm trying to create markers in a loop.
When you try to create an array with markers, it swears at

<Marker position={{ lat: {item.lat},  lng: {item.lng} }}>
, and specifically
on {item.lat} and {item.lng} .

I dived deeper, but could not figure out how to correctly pass the parameters.
If it's not difficult, tell me why it swears and what to do.

import React from 'react';
import {Map, GoogleApiWrapper, Marker} from "google-maps-react";
import markers from "./dataMarkers";

export class Maps extends React.Component {

    constructor(props) {
        super(props);

        const markersComponent = markers.map((item) =>
            <Marker position={{ lat: {item.lat},  lng: {item.lng} }}>);
    }

    render(){
        const mapStyles = {
            width: "100%",
            height: "100%",
        };

        return (
            <Map
                google={this.props.google}
                zoom={15}
                style={mapStyles}
                initialCenter={{ lat: 56.831719024772426, lng: 60.60158335488396 }} 
            >
                 {markersComponent }
            </Map>
            );
    }
}

export default GoogleApiWrapper({
    apiKey: '1111111111111111111111111111111'
})(Maps);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ice, 2020-12-11
@IceRD

I will assume that you need to add keys to the markers and lat / lng lead to toString

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question