React-google-maps: How to use Retina optimized icons for Marker image?

[zainer26]

I'm trying to implement retina optimized images for the map markers, but I'm not sure how to specify the 'size' or 'scaledSize' properties for the icon using this component.

Perhaps that's not even the correct way to do it using this component?

Please let me know how to achieve this.

Here is the relevant code snippet:
...
{plots ?

        plots.map((marker, index) => {
            var location = {lat: Number(marker.lat), lng: Number(marker.lng)};
            var image = '/../../img/[email protected]';

            return (
                <Marker 
                    defaultPosition={location}
                    position={location}
                    key={index}
                    {...marker}
                    icon={image}
                    onClick={this.handleMarkerClick.bind(this, marker)}
                />
            );
        }) 
: <span>{ this.resetMarkers() }</span> }                        

Thanks in advance.

[zainer26]

ok I figured it out... I just needed to specify the image variable as an Icon object and pass the options in there. i.e. 'url' and 'scaledSize'. Here's the updated snippet:

...
{plots ? 
plots.map((marker, index) => {
var location = {lat: Number(marker.lat), lng: Number(marker.lng)};
var image = {
    url: '/../../img/[email protected]',
    scaledSize: new google.maps.Size(31, 43)
};

    return (
    <Marker 
        defaultPosition={location}
        position={location}
        key={index}
        {...marker}
        icon={image}
        onClick={this.handleMarkerClick.bind(this, marker)}
    />
    );
}) 
: <span>{ this.resetMarkers() }</span> }
</GoogleMap>

[joeynimu]

@zainer26 does this work for you scaledSize: new google.maps.Size(31, 43) ? I get google is not defined on the console.

[Darkham42]

@joeynimu just add this line in the top of your file
/*global google*/
It'll disable ESLint and it'll work for you :)

[joeynimu]

@Darkham42 thanks man. isn't this something that can help if it was on the docs? Or is it that it isn't obvious just to me?

[theZulqarnain]

@Darkham42 after defining /*global google*/ also it showing me google is not defined

[Darkham42]

@theZulqarnain like that I can't do anything for you...
Have you put it at the right place ?

[theZulqarnain]

yeah, i added on top of the file

[Darkham42]

I can't see your code. There is something else I think, but it's not with these indications I could do something for you... sorry...

[joeynimu]

@Darkham42 if you could share your code I could be able to help. You could also try doing something like const google = window.google and see if it'll work.

[partypete25]

I ran into the same problem, but you don't need to call the google.maps.Size constructor.
You can do it like this, for example:
icon={{ url: '/images/marker.png', size: {width: 60, height: 100}, anchor: {x: 15, y: 50}, scaledSize: {width: 30, height: 50}, }}

[asaduryan]

also You can do something like this

   <Marker
      key={i}
      options={
         {
          icon: {
             url: './icons/marker.png',
             scaledSize: new window.google.maps.Size(25, 25),
           },
         }
       }
    >