Установите размеры маркера SVG на Google Картах

Question

В настоящее время я пытаюсь установить размеры моих маркеров SVG, они отображаются довольно большими, и я не могу изменить размер, как вы обычно делаете в JS, из-за того, как моя карта настроена в ACF.

Может кто-нибудь предложить, как я мог бы изменить размер моих SVG? Я действительно не хочу использовать PNG, поскольку они всегда выглядят низкокачественными, а размеры файлов намного больше, чем PNG.

Ниже мой код:

function add_marker( $marker, map ) { 
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var icon = $marker.attr('data-img');

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map,
    icon        : icon,
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
    // create info window
    var infowindow = new google.maps.InfoWindow({
        content     : $marker.html()
    });

    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {          

        infowindow.open( map, marker );

    });
}

}

    <?php if( have_rows('locations') ): ?>
        <div class="acf-map">
            <?php while ( have_rows('locations') ) : the_row(); $location = get_sub_field('location'); ?>
            <?php $location_type = get_sub_field( 'location_type' ); ?>

            <?php if ($location_type == 'oxford-college') { ?>
                <?php $type_icon = get_stylesheet_directory_uri().'/assets/images/icon-square.svg'; ?>
            <?php  } ?> 

                <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" data-img="<?php echo $type_icon; ?>">
                    <h4><?php the_sub_field('title'); ?></h4>
                    <p class="address"><?php echo $location['address']; ?></p>
                    <p><?php the_sub_field('description'); ?></p>
                </div>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>

Область, в которой создается маркер:

data-img="<?php echo $type_icon; ?>

Answer 1

Размер значков можно масштабировать с помощью свойства scaledSize при определении объекта значка:

var icon = {
    url: $marker.attr('data-img'), // url
    scaledSize: new google.maps.Size(40, 40), // experiment with these values until you're satisfied
    origin: new google.maps.Point(0,0), // set the base origin
    anchor: new google.maps.Point(0, 0) // set the base anchor
};