0

I am having an issue when loading the react-google-maps/api map. It displays properly but there appears to be a pattern that appears when zooming in, or zooming out. The shapes seem to mess up the look of the map overall.

Map with white diamond like markers

I have tried changing some of the setting and looking to see if anyone else had the same problem. It does not seem others are having this problem online. Any help would be appreciated.

Here is a snippit of what I have in code.

<LoadScript
  googleMapsApiKey={ process.env.NEXT_GM_KEY }>
  
   <GoogleMap
     mapContainerClassName={styles.GoogleMap}
     options={{
       styles: mapStyle,
       streetViewControl: false,
       disableDefaultUI: false,
       }}
                        
     mapContainerStyle={containerStyle}
     center={center}
     zoom={10}
   >
   </GoogleMap>
 </LoadScript>
RowBear
  • 1

1 Answers1

0

It would appear as though those diamonds are coming from the CSS code you had written. You put a border radius on images on the container. The way that google maps works is by stitching together various images together. So take off the CSS that gives a border radius to all the images that are contained with the map.

Thank you google maps support team for their help on this one!

RowBear
  • 1