Google Maps API Custom Marker SVG Size and Position

Question

When creating custom Google Map marker SVGs from div data attribute, how would I control the size of the SVG? By default, Google is making it huge. If I use CSS, the positioning is completely off. The Google API documentation is a bit different from what I have below and I can't figure out how to make it work. Any info is appreciated!

This is the marker HTML:

<div class="marker" data-lat="<?php echo $loc_address_lat; ?>" data-lng="<?php echo $loc_address_lng; ?>" data-marker="/custom-pin-<?php echo $map_marker_color; ?>.svg">

This is the part of the script which creates the marker. My attempts such as 'scaledSize' have failed.

// create marker
var marker = new google.maps.Marker({
    position : latlng,
    map : map,
    //icon : image // Custom image (comment out to disable),
    icon: $marker.attr('data-marker'),
    scaledSize: new google.maps.Size(10, 10),
});

Here's a fiddle: https://jsfiddle.net/inhouse/3xnz8yg9/2/

Answer 1

The scaledSize is a property of the icon, not the marker.

For more than 256 markers, optimized: false on the marker object is required to prevent clipping.

fiddle with 2500 markers

Use it like this:

var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  icon: {
    url: $marker.attr('data-marker'),
    scaledSize: new google.maps.Size(30, 30),
  }
});

updated fiddle

code snippet:

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

.large-acf-map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="large-acf-map">
  <div class="marker" data-lat="-25.363" data-lng="131.044" data-marker="https://s3-us-west-2.amazonaws.com/s.cdpn.io/134893/pin-red.svg"></div>
  <div class="marker" data-lat="-25.393" data-lng="131.044" data-marker="http://maps.google.com/mapfiles/ms/micons/blue.png"></div>

</div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<script type="text/javascript">
  (function($) {
    function render_map($el) {

      // var
      var $markers = $el.find('.marker');

      // vars
      var args = {
        zoom: 16,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        //mapTypeId : google.maps.MapTypeId.HYBRID
      };

      // create map               
      var map = new google.maps.Map($el[0], args);

      // add a markers reference
      map.markers = [];

      // add markers
      $markers.each(function() {

        add_marker($(this), map);

      });

      // center map
      center_map(map);

    }

    // create info window outside of each - then tell that singular infowindow to swap     content based on click
    var infowindow = new google.maps.InfoWindow({
      content: ''
    });

    /*
     *  add_marker
     *
     *  This function will add a marker to the selected Google Map
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   4.3.0
     *
     *  @param   $marker (jQuery element)
     *  @param   map (Google Map object)
     *  @return  n/a
     */

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

      // create marker
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: {
          url: $marker.attr('data-marker'),
          scaledSize: new google.maps.Size(30, 30),
        }
      });
      // add to array
      map.markers.push(marker);

      // if marker contains HTML, add it to an infoWindow
      if ($marker.html()) {

        // show info window when marker is clicked & close other markers
        google.maps.event.addListener(marker, 'click', function() {
          //swap content of that singular infowindow
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
        });

        // close info window when map is clicked
        google.maps.event.addListener(map, 'click', function(event) {
          if (infowindow) {
            infowindow.close();
          }
        });
      }

    }

    /*
     *  center_map
     *
     *  This function will center the map, showing all markers attached to this map
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   4.3.0
     *
     *  @param   map (Google Map object)
     *  @return  n/a
     */

    function center_map(map) {

      // vars
      var bounds = new google.maps.LatLngBounds();

      // loop through all markers and create bounds
      $.each(map.markers, function(i, marker) {

        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

        bounds.extend(latlng);

      });

      // only 1 marker?
      if (map.markers.length == 1) {
        // set center of map
        map.setCenter(bounds.getCenter());
        map.setZoom(16);
      } else {
        // fit to bounds
        map.fitBounds(bounds);
      }

    }

    /*
     *  document ready
     *
     *  This function will render each map when the document is ready (page has loaded)
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   5.0.0
     *
     *  @param   n/a
     *  @return  n/a
     */

    $(document).ready(function() {

      $('.large-acf-map').each(function() {

        render_map($(this));

      });

    });

  })(jQuery);
</script>