Resize map marker in NG-Map (AngularJS)?

Question

I am trying to resize my map icon with scaledSize however the icon does not change, here is my code:

This works:

<marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}" 

on-mouseover="showInfoWindow(event, '{resource.id}')">

But when I try to resize the icons, it does not work with scaledSize:

  <div class="map-container">
  <div style="margin: 0 auto; overflow:hidden; background: white;">
    <div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
      <ng-map ng-map-custom style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11">
        {!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|}


        <marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}"
        on-mouseover="showInfoWindow(event, '{resource.id}')"></marker>

        <info-window id="{resource.id}" max-width="300" style="display: none;">
          <div ng-non-bindable="">
            <div id="siteNotice"></div>
            <a href="" response-click="go">
              <h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3>
            </a>
            <div id="bodyContent">
              <p>
                {resource.city}
              </p>
            </div>
          </div>
        </info-window>

        {!end}
      </ng-map>
    </div>
  </div>
</div>

Answer 1

Try to use it in the following syntax -

{
  url: require('../images/vehicle-active.png'), // gives a data://<value>
  scaledSize: {
    height: 40,
    width: 40
  }

}