how to resize custom svg marker using data setStyle on geojson point feature

Question

This should be fairly trivial to fix but I cant figure out why my custom marker disappears when I set the icon width and height.

The svg icon appears fine on the map before trying to resize it... https://jsfiddle.net/joshmoto/pzhjc6d7

But when I add the sizing params via the map.data.setStyle icon array, my marker disappears.

 var geoJson_features = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "id": 70, "name": "roman coin" }, "geometry": { "type": "Point", "coordinates": [ -0.7318782806396484375, 51.8924376272136740340 ] } }] }; function initialize() { // map properties var mapProp = { zoom: 17, zoomControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, 'night_hawk_style' ], style: google.maps.MapTypeControlStyle.HORIZONTAL, position: google.maps.ControlPosition.BOTTOM_RIGHT, backgroundColor: 'none' } }; // google map object var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); // load GeoJSON. google.maps.event.addListenerOnce(map, 'idle', function() { // load GeoJSON. map.data.addGeoJson(geoJson_features); // create empty bounds object var bounds = new google.maps.LatLngBounds(); // loop through features map.data.forEach(function(feature) { // get the features geometry var geo = feature.getGeometry(); // loop through each coordinate geo.forEachLatLng(function(LatLng) { bounds.extend(LatLng); }); }); // fit data to bounds map.fitBounds(bounds); }); // map data styles based on geo json properties map.data.setStyle(function(feature) { // statusColor var statusColor = 'transparent'; // check feature property status if (feature.getProperty('status')) { statusColor = feature.getProperty('status'); } // return the style for the feature return ({ icon: { // set svg icon svg url: 'https://svgshare.com/i/8tN.svg', // this marker is 14 pixels wide by 12 pixels high. //size: new google.maps.Size(14, 12), // the origin for this image is (0, 0). //origin: new google.maps.Point(0, 0), // The anchor for this image is the base (0, 12). //anchor: new google.maps.Point(0, 12) } }); }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div id="googleMap"></div> <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 

As soon as start adding these parameters below, my custom marker disappears. And there are no errors in the console.

return ({
  icon: {

    // set svg icon svg
    url: 'https://svgshare.com/i/8tN.svg',

    // this marker is 14 pixels wide by 12 pixels high.
    size: new google.maps.Size(14, 12),

    // the origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),

    // The anchor for this image is the base (0, 12).
    anchor: new google.maps.Point(0, 12)

  }
});

Can anyone help understand whats going wrong here. Thanks

Answer 1

To scale that icon, set its scaledSize to the desired size (and the anchor where you want it, middle of the base seems a little strange to me, but it that is what you want, use Size(7,12) as below):

map.data.setStyle(function(feature) {
  // statusColor
  var statusColor = 'transparent';
  // check feature property status
  if (feature.getProperty('status')) {
    statusColor = feature.getProperty('status');
  }
  // return the style for the feature
  return ({
    icon: {
      // set svg icon svg
      url: 'https://svgshare.com/i/8tN.svg',
      // this marker is 765.9 pixels wide by 666 pixels high.
      scaledSize: new google.maps.Size(14, 12),
      // The anchor for this image is the base (0, 12).
      anchor: new google.maps.Point(7, 12)
    }
  });
});

fiddle

code snippet:

 function initialize() { // map properties var mapProp = { zoom: 17, zoomControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, 'night_hawk_style' ], style: google.maps.MapTypeControlStyle.HORIZONTAL, position: google.maps.ControlPosition.BOTTOM_RIGHT, backgroundColor: 'none' } }; // google map object var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var measle = new google.maps.Marker({ position: { lng: -0.7318782806396484375, lat: 51.8924376272136740340 }, map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) } }); // load GeoJSON. google.maps.event.addListenerOnce(map, 'idle', function() { // load GeoJSON. map.data.addGeoJson(geoJson_features); // create empty bounds object var bounds = new google.maps.LatLngBounds(); // loop through features map.data.forEach(function(feature) { // get the features geometry var geo = feature.getGeometry(); // loop through each coordinate geo.forEachLatLng(function(LatLng) { bounds.extend(LatLng); }); }); // fit data to bounds map.fitBounds(bounds); }); // map data styles based on geo json properties map.data.setStyle(function(feature) { // statusColor var statusColor = 'transparent'; // check feature property status if (feature.getProperty('status')) { statusColor = feature.getProperty('status'); } // return the style for the feature return ({ icon: { // set svg icon svg url: 'https://svgshare.com/i/8tN.svg', // this marker is 765.9 pixels wide by 666 pixels high. scaledSize: new google.maps.Size(14, 12), // The anchor for this image is the base (0, 12). anchor: new google.maps.Point(7, 12) } }); }); } google.maps.event.addDomListener(window, "load", initialize); var geoJson_features = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "id": 70, "name": "roman coin" }, "geometry": { "type": "Point", "coordinates": [-0.7318782806396484375, 51.8924376272136740340 ] } }] }; 

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div id="googleMap"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> 

Answer 2

You don't have to return the icon in your initialize function, you should set your icon to a new object with the new properties.

const icon = {

    // set svg icon svg
    url: 'https://svgshare.com/i/8tN.svg',

    // this marker is 14 pixels wide by 12 pixels high.
    size: new google.maps.Size(14, 12),

    // the origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),

    // The anchor for this image is the base (0, 12).
    anchor: new google.maps.Point(0, 12)

  }
      marker = new google.maps.Marker({
        position: feature.position,
        icon: icon,
        map: map
      });