Set SVG Marker sizes on Google Maps

Question

I'm currently struggling to set the sizes of my SVG Markers, they are showing up quite large, and I can't amend the size as you would usually in the JS because of the way my map is setup in ACF.

Can anyone suggest a way I could amend the size of my SVGs? I don't really want to use PNGs as they always look low quality, and file sizes are much larger as PNG.

Below is my code:

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; ?>

The area which is creating the marker is:

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

Duplicate of https://stackoverflow.com/questions/24413766/how-to-use-svg-markers-in-google-maps-api-v3/24426400#24426400 — MrUpsidown, Oct 28 '19 at 12:10

score 3 · Accepted Answer · answered Oct 28 '19 at 10:53

You can scale the size of the icons using the scaledSize property while defining your icon object:

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
};

Set SVG Marker sizes on Google Maps

1 Answers1