Trouble getting MarkerOptions to parse correctly

[acres42]

Hi there:

I set my options like so in Twig:

{% set options = {
            'id': 'location-map',
            'height': 700,
            'zoom': 7,
            'draggable': true,
            'center': { 'lat':46.149692, 'lng':-97.193878 },
            'mapTypeControl': false,
            'disableDefaultUI': false,
            'scaleControl': true,
            'zoomControl': true,
            'scrollwheel': false,
            'markerOptions': {
                'icon': {
                    'url': '/assets/images/map-marker.png',
                    'scaledSize': 'new google.maps.Size(30,30)'
                }
            }
} %}

However, the console keeps throwing this error, which I have managed to isolate down to the scaledSize. I cannot figure out a way to pass ScaledSize into options and to get the map to render my icons down. Any ideas about why this might not be parsing?

[acres42]

Still not parsing, but not appropriate for issue, either.

[darinlarimore]

Hey there @acres42 I was able to get this working by using an object with height and width for the scaledSize param like this screenshot shows.

[lindseydiloreto]

Great catch @darinlarimore, that's exactly the right answer! 👍

For most of the google.maps.Whatever methods, you can generally use the object literal equivalent as a drop-in replacement. Google has an example of this behavior using the LatLng method VS the Lat/Lng object literal, but the same logic applies to many similar methods. When in doubt, just try the literal approach!

On a side note @acres42, you may want to double-check which options are available in the new plugin. It looks like your snippet may have been migrated from Smart Map, and some of those options are no longer applicable (or should be moved inside of mapOptions). Maybe something a little closer to this...

{% set options = {
    'id': 'location-map',
    'height': 700,
    'zoom': 7,
    'center': { 'lat':46.149692, 'lng':-97.193878 },
    'mapOptions': {
        'disableDefaultUI': false,
        'mapTypeControl': false,
        'scaleControl': true,
        'zoomControl': true,
        'scrollwheel': false,
    },
    'markerOptions': {
        'icon': {
            'url': '/assets/images/map-marker.png',
            'scaledSize': {
                'width': 30,
                'height': 30
            }
        }
    }
} %}

Hope that helps, feel free to track me down on Discord as well! 🙂