1

I have used the @react-google-maps/api library to add a google map and show some custom marker icons on the google map. I have followed the documentation found in here. And added a marker. I have successfully able to show my list of custom markers on the Google Map. But the issue is, I can not scale down those images and those marker icons are shown in its original size (those png images are very large)

"objectList" list contains data. The "iconUrl" returns an url of custom marker png image.

I am not sure how I can scale down the icon, since the "scale" attribute I used in the Marker is not working. 

import { GoogleMap, LoadScript, Marker  } from "@react-google-maps/api";

<LoadScript googleMapsApiKey="<MAP_API_KEY_GOES_HERE>">

          <GoogleMap center={defaultProps.center} zoom={defaultProps.zoom} mapContainerStyle={mapStyle}>

              {objectList.map( (obj) => (

                    <Marker key={obj.idNum} position={obj.position} icon={{url: obj.iconUrl, scaledSize: new window.google.maps.Size(90, 42) }} />

              ))}


          </GoogleMap>

      </LoadScript>

UPDATE:I have tried the "scaledSize" attribute as suggested by the this question. But it throws me the below error

Cannot read properties of undefined (reading 'maps') TypeError: Cannot read properties of undefined (reading 'maps')

How can I resolve this error ? Do I have to import another library ?

Cham
  • 787
  • 3
  • 11
  • 25
  • What I can see here is that you're trying to instantiate a new object as a value of a property. Have you tried enclosing it with another curly brackets? Or how about instantiating it outside? – Yrll May 21 '23 at 23:49

1 Answers1

0

Instead of using icon directly, you can pass it to options and set your preferred scaledSize like so:

options={{
  icon: {
    url: obj.iconUrl,
    scaledSize: new window.google.maps.Size(90, 42),
  },
}}
Mirha Masala
  • 323
  • 3
  • 15