React-google-maps: How can I use custom marker (png file)

[webdeveloper0429]

Is there any simple props to use custom marker?
How can I use custom marker?

[MathieuCh]

https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

Type: string|Icon|Symbol
Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url.

<Marker options={{icon: 'your_icon_url}} >

should work :)

[webdeveloper0429]

Thanks @MathieuCh
would you clarify more option about resizing image
I have use both of png and ico (png size is large)

[MathieuCh]

https://developers.google.com/maps/documentation/javascript/reference#Icon

scaledSize : The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.

size : The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.

<Marker options={{ icon: { url: ...., scaledSize: ...., size: .... } }} >

[webdeveloper0429]

+1 @MathieuCh

Thanks very much

[joeynimu]

Hey @MathieuCh ,

I know you gave the answer above on how to scale the images/icons but you didn't specify the value type of the scaledSize and size

Google documentation states that you use new google.maps.size(45,56) I have tried the same on react-google-maps but I get google is not defined yet I have used it with withScripts. What do I pass? Is it a string, Object or other.

[CodingToBeWithHer]

@joeynimu use window.google.maps ... works for me

[fabriceyopa]

This is how i fixe that

let iconMarker = new window.google.maps.MarkerImage(
                    url,
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new window.google.maps.Size(32, 32)
                );
                return(
                    <Marker
                        icon={iconMarker}
                        key={marker.id}
                        onClick={onClick}
                        position={{ lat: parseInt(marker.latitude), lng: parseInt(marker.longitude)}}>
                        {props.selectedMarker === marker &&
                        <InfoWindow>
                            <div style={{'color':'black'}}>
                               Infowindow texte
                            </div>
                        </InfoWindow>}
                    </Marker>
                )

[smeijer]

Actually, resizing a marker is a lot easier than the post above.

const position = { lat: 52, lng: 6 };
const icon = { url: 'https://...', scaledSize: { width: 32, height: 32 } };

<Marker position={position} icon={icon} />

By using scaledSize and providing a object with a width and height (value in px), we don't need to call globals and/or constructors.

[velthune]

Plus, if you want to specify a local image:

icon: {url: require("./pin.png"), scaledSize: {width: 32, height: 32}}

About icon prop, Google documentation says:

Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url.

See more on documentation.

[JustFly1984]

@velthune
The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api@1.7.5

Enjoy!

[velthune]

@JustFly1984 thank you for the tip, but I'm using a theme that comes with:

"react-google-maps": "^9.4.5"

Do you suggest to refactor to the newest version?

[JustFly1984]

@velthune Can you point me to the theme files? Maybe I could add that theme to my lib

[JustFly1984]

I would suggest to refactor to my library, we are working to improve it constantly

[velthune]

Sorry for the late, I'm using ArchitectUI template.
Well, I'll refactor as soon as possibile! 👌

[ajay-bsoft]

Plus, if you want to specify a local image:

icon: {url: require("./pin.png"), scaledSize: {width: 32, height: 32}}

About icon prop, Google documentation says:

Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url.

See more on documentation.

the require is most important for local png file. Thanks