CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsmapsreact-google-maps
Ali
Ali

Reputation: 325

Why react-google-maps/api doesn't show lines and polygons?

I use react-google-maps/api library in main project but I can't see the lines I drew on the map. So I created demo project for try same code. it works. But main project doesn't work. I looked react versions, react-dom versions, react-google-maps/api versions. All three are the same versions. In main project; map and marker coming. But I want to draw a container or lines, it doesn't show. When I press double click, I get coordinate info to my console. So I get true coordinate info but I can't see lines and container. Why I can't see lines on my main project?

import React from 'react';
import { GoogleMap, useJsApiLoader, DrawingManager } from '@react-google-maps/api';

const containerStyle = {
  width: '800px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function App() {

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "my_Key"
  })

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(center);
    map.fitBounds(bounds);
  }, [])

  function getPaths(polygon) {
    var polygonBounds = polygon.getPath();
    var bounds = [];
    for (var i = 0; i < polygonBounds.length; i++) {
      var point = {
        lat: polygonBounds.getAt(i).lat(),
        lng: polygonBounds.getAt(i).lng()
      };
      bounds.push(point);
    }
    console.log("coordinates", bounds);
  }

  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
      onLoad={onLoad}
    >
      <DrawingManager
        defaultDrawingMode={window.google.maps.drawing.OverlayType.POLYGON}
        onPolygonComplete={value => getPaths(value)}
        defaultOptions={{
          drawingControl: true,
          drawingControlOptions: {
            position: window.google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              window.google.maps.drawing.OverlayType.POLYGON
            ],
          },
          polygonOptions: { editable: true }
        }}
      />
    </GoogleMap>
  ) : <></>
}

export default App;

Upvotes: 2

Views: 1805

Answers (4)

hacker boy
hacker boy

Reputation: 21

Very simple if anyone still facing same issue, functional version of any component you want to use. e.g, PolygonF, MarkerF etc.

Upvotes: 2

Eric
Eric

Reputation: 61

While disabling strict mode works, that is highly discouraged for you lose valuable development benefits when working with React. This issue has to do with you using the class based components. Try using the functional alternatives as that ended up working for me.

So instead of Marker, Polygon or InfoWindow
Use MarkerF, PolygonF, or InfoWindowF

Upvotes: 2

XxXtraCookie
XxXtraCookie

Reputation: 327

Removing React.StrictMode isn't a fix! It can cause you more trouble than good. I also have this issue where the drawing UI doesn't render when strict mode is on and I can't fix this as well but bare in mind what your application is losing when turning strict mode off.

Upvotes: 0

Alex Natea
Alex Natea

Reputation: 69

Check if react strict mode is on or not. It should be off. This fixed my polygon not showing on map issue

Upvotes: 6

Related Questions