2

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;
Ali
  • 305
  • 3
  • 14
  • While i was trying your code, It was giving me error or adding `drawing` library while loading the script. Have you added that? – Ibtisam Ur Rehman Jun 10 '22 at 18:42
  • I forgot to mention that I added script to html. Project works in demo and main project. The only problem is I can't see the drawing in my main project. – Ali Jun 11 '22 at 11:45

3 Answers3

5

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

Alex Natea
  • 51
  • 1
0

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.

XxXtraCookie
  • 171
  • 2
  • 11
0

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

Anonymous
  • 835
  • 1
  • 5
  • 21
Eric
  • 41
  • 4
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34774012) – Hamza Rashid Aug 05 '23 at 22:20