no-resize icon
Icon that doesnt size with zoom level
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="results"></div>
<div id="map"></div>
CSS
#map {
width: 450px;
height: 400px;
}
JavaScript
function initialize() {
var map;
var centerPosition = [[38.713107, -90.42984],[38.713907, -90.42914]];
var options = {
zoom: 9,
center:new google.maps.LatLng(38.713107, -90.42984) ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map'), options);
var icon = 'https://www.google.com/mapfiles/marker_black.png';
for(i=0;i< centerPosition.length;i++){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(centerPosition[i][0] , -90.42984[i][1]),
map: map,
icon: icon
});
}
//add a zoom change listener, so you can resize the icon based on the zoom level
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
markerWidth = (zoom / 9) * 20
markerHeight = (zoom / 9) * 34
//set the icon with the new size to the marker
marker.setIcon({
url: icon,
scaledSize: new google.maps.Size(markerWidth, markerHeight)
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);