CODEWITHSUNDEEP
reactjsreact-google-maps
AGrush
AGrush

Reputation: 1167

@react-google-maps Marker LatLng throwing error

I'm using the @react-google-maps/api to build my first react map.. But my latLng literal for position inside the Marker is breaking my code. Is this not the same latLng format that I'm using for center which works fine? How is my Marker latLng wrong? That seems to be the only required attribute in the docs so I'm at a dead end.

import React, { Component } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import icon1 from '../map/icon1.svg';
import iconDead from '../map/iconDead.svg';

const center = { lat: 51.510228, lng: -0.132992 };
const API = 'xxxx'; 
const containerStyle = {
  width: '100%',
  height: '800px'
};

function MyComponent( markers, onToggleOpen ) {

  
  return (
    <LoadScript
      googleMapsApiKey={API}
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={ lat: 51.510228, lng: -0.132992 }></Marker>
        <></>
      </GoogleMap>
    </LoadScript>
  )
}
 
export default React.memo(MyComponent)

Upvotes: 2

Views: 583

Answers (1)

Bj&#246;rn Hei&#223;
Bj&#246;rn Hei&#223;

Reputation: 1728

The position property is an object. Hand your lat and lng values like this:


<Marker position={{lat: 51.510228, lng: -0.132992}}></Marker>

Upvotes: 3

Related Questions