Using the React Google maps API shows black bordered tiles when drawing a polyline

I am using the @react-google-maps/api library to draw markers and a polyline. Markers are plotted fine. However, when I plot a polyline in addition to markers, I additionally get black borders around some of the tiles. It looks like a bounding box around the polyline.

This bordering happens if I have markers or not. It also happens if I plot a polygon instead of a polyline. The borders continue to appear as I zoom in and out. I’ve reworked the code into a React component rather than hooks and that still has the same problem. Not sure what else to try.

example map

I’m using node v15.6.0, react 17.0.1, @react-google-maps/api version 2.1.1 on a Mac.

Here is an example of the code I’m using. This is compiled from the examples on the @react-google-maps/api documentation site.

import React from "react";

import {
  GoogleMap,
  useJsApiLoader,
  Polyline,
} from "@react-google-maps/api";

function MyMap(props) {

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API,
  });

  const [map, setMap] = React.useState(null);

  const onLoad = React.useCallback(function callback(newMap) {
    setMap(newMap);
  }, []);

  const onUnmount = React.useCallback(function callback(newMap) {
    setMap(null);
  }, []);

const mapContainerStyle = {
    height: "400px",
    width: "800px",
  };

  const center = {
    lat: 0,
    lng: -180,
  };

  const path = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];

  const options = {
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    clickable: false,
    draggable: false,
    editable: false,
    visible: true,
    radius: 30000,
    zIndex: 1,
  };

  return isLoaded ? (
    <GoogleMap
      id="surveys"
      mapContainerStyle={mapContainerStyle}
      zoom={2}
      center={center}
      onLoad={onLoad}
      onUnmount={onUnmount}
    >
      <Polyline path={path} options={options} />
    </GoogleMap>
  ) : (
    <p>not loaded</p>
  );
}

Source: Ask Javascript Questions

LEAVE A COMMENT