title: Custom marker different size in different browsers - Google Maps API (v3)
body: <p>I have an issue with my Google Maps API (v3) integration where Safari and Chrome are displaying the custom marker in different sizes.</p>
  
  <p>I would like to be able to have the image the same size across browsers. </p>
  
  <p>I've tried adjusting scaledSize, does nothing. I've also tried adding size: new google.maps.Size(10, 10), but that doesn't seem to help either. Maybe I'm entering it wrong.</p>
  
  <p>Safari: 
  <a href="https://i.stack.imgur.com/HcF2a.png" rel="nofollow noreferrer">Safari displays the image at the desired size.</a></p>
  
  <p>Google Chrome:
  <a href="https://i.stack.imgur.com/ZCOIZ.png" rel="nofollow noreferrer">For some reason Chrome displays the image as a large size.</a></p>
  
  <p>HTML</p>
  
  <pre><code> &lt;section id="map" class="map cont-100"&gt;
  
    &lt;/section&gt;
  </code></pre>
  
  <p>Sass</p>
  
  <pre><code>.map
    height: 50rem
    width: 100%
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var map;
  
  function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: new google.maps.LatLng(25.074495, -77.325485),
  zoomControl: false,
  scrollwheel: false,
  streetViewControl: false,
  mapTypeControl: false,
  mapTypeId: 'roadmap',
  styles: [{
    "featureType": "water",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#b5cbe4"
    }]
  }, {
    "featureType": "landscape",
    "stylers": [{
      "color": "#efefef"
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [{
      "color": "#83a5b0"
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [{
      "color": "#bdcdd3"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [{
      "color": "#ffffff"
    }]
  }, {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{
      "color": "#e3eed3"
    }]
  }, {
    "featureType": "administrative",
    "stylers": [{
      "visibility": "on"
    }, {
      "lightness": 33
    }]
  }, {
    "featureType": "road"
  }, {
    "featureType": "poi.park",
    "elementType": "labels",
    "stylers": [{
      "visibility": "on"
    }, {
      "lightness": 20
    }]
  }, {}, {
    "featureType": "road",
    "stylers": [{
      "lightness": 20
    }]
  }]
  });
  
  var iconBase = 'http://cochinamogulos.com/img/';
  var icons = {
  info: {
    icon: iconBase + 'nexia-favicon.svg'
  },
  scaledSize: new google.maps.Size(2, 2), // scaled size
  origin: new google.maps.Point(0,0), // origin
  anchor: new google.maps.Point(0, 0) // anchor
  };
  
  var features = [{
  position: new google.maps.LatLng(25.074495, -77.325485),
  type: 'info'
  }];
  google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
  // Create markers.
  features.forEach(function(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
  });
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <pre><code>    var logo = {
    url: "http://cochinamogulos.com/img/nexia-favicon.svg",
    size: new google.maps.Size(20,32),
    origin: new google.maps.Size(0,0),
    anchor: new google.maps.Size(0,0),
  };
  
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(25.074495, -77.325485),
      icon: logo,
      map: map
    });
  
  google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
  </code></pre>