異なるブラウザでカスタムマーカーのサイズが異なる - Google Maps API（v3）

Question

SafariとChromeで異なるサイズのカスタムマーカーが表示されるGoogle Maps API（v3）統合に問題があります。

画像をブラウザ間で同じサイズにしたいと考えています。

私はscaledSizeを調整しようとしましたが、何もしません。私はまた、サイズを追加しようとしました：新しいgoogle.maps.Size（10、10）、それはどちらか助けていないようです。たぶん私はそれを間違って入力します。

サファリ： Safari displays the image at the desired size.

Google Chromeの： For some reason Chrome displays the image as a large size.

HTML

<section id="map" class="map cont-100"> 

    </section> 

サス

.map 
    height: 50rem 
    width: 100% 

JS

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

ご協力いただければ幸いです。

---

EDIT：

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

Answer 1

あなたはちょうどここに、マーカーのサイズを変更する場合の例である：

var image = 
{ 
    url: 'images/beachflag.png', 
    size: new google.maps.Size(20, 32), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(0, 32) 
    }; 

var marker = new google.maps.Marker(
      { 
       position: new google.maps.LatLng(data.LastLat, data.LastLon), 
       data: data, 
       title: data.Description, 
       icon: image 
      });