I tried this code, but getting 'unexpected token errors". Probably something to do using incorrect syntax.

{% js %}
    var markerId = 'smartmap-mapcanvas-1.{{ entry.id }}.addressInformation';
        'icon':       '{{ icon }}'; 
        'scaledSize:' 'new google.maps.Size(32,32)'
{% endjs %}

The error in the console

var markerId = 'smartmap-mapcanvas-1.550.addressInformation';
    'icon':       '//d1ado4imyxw3fk.cloudfront.net/html/pin-otto-12.png'; 
    'scaledSize:' 'new google.maps.Size(32,32)'
  • Did you made mistakes while copy pasting? Because your syntax doesn't seem correct unless smartmap is using eval but even so using ; after object properties is wrong Aug 24 '18 at 7:55
  • The above is the smart map code as described in the smartmap docu under: Different icons for different marker types. I did make a mistake though with the ; character. After replacing the ; for a , the map reloads without errors. However the icons are still not sized. Aug 24 '18 at 8:35
  • They don't state to do 'new google.maps.Size(32,32)' because that will pass a string... I can't think of a reason why smartmap expects a string rather than the actual object. Aug 24 '18 at 8:38
  • it should be: 'scaledSize': new google.maps.Size(32,32) (wrong postion of the colon, value is not a string)
    – phaetons
    Aug 24 '18 at 12:54
  • 2
    Oh, but that would be in Twig... he's using JS here. In that case, you are correct about passing the object directly!
    – Lindsey D
    Aug 24 '18 at 16:11

Looks like there are a couple of notable errors in your JS:

  • You have a semi-colon at the end of your icon line. That should be a comma.
  • On the scaledSize line, you have the colon inside the quote. That should be outside.
  • Added per Robin's comment... Since you're doing this in JS (not Twig), the new google.maps.Size(32,32) shouldn't be enclosed in quotes. Pass in the JS object directly.

Try something like this...

{% js %}
    var markerId = 'smartmap-mapcanvas-1.{{ entry.id }}.addressInformation';
        'icon':       '{{ icon }}',
        'scaledSize': new google.maps.Size(32,32)
{% endjs %}
  • This is the correct answer
    – Tchick
    Sep 17 '20 at 22:03

You already stated the wrong ;

Aside from that, i managed to change the size in one of my projects, where i had to use a bitmap image, this way:

marker[id] = new google.maps.Marker({
    position: region.pos,
    map: map,
    icon: {url: imageMarker,
            size: new google.maps.Size(52, 52),
            scaledSize: new google.maps.Size(32, 32),
            anchor: new google.maps.Point(15, 35) // offset

I didn't use the smartmaps-plugin, but i think that's irelevant.

(The png had a different size, that's the reason size and scaledSize have different values)

  • Tried as suggested. Code seems to be OK, no errors. But unfortunately still no sizing Aug 24 '18 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.