简体   繁体   中英

Change Custom Marker Size Google Maps

I managed set a custom icon for the image marker (url of icon is in code), but I have no idea how to customize its size. I've looked around for help online, but due to my very limited coding knowledge, have not been able to add the code needed to make it work. Can someone send me the complete, finished code with the modification needed to customize width/height for the market icon?

Thank you!

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDL51DzuRotMkfR09g540u2dZHlKPMpR54'></script>
<div style='overflow:hidden;height:450px;width:100%;'>
<div id='gmap_canvas' style='height:450px;width:100%;'></div>
<style>
#gmap_canvas img {
  max-width:none!important;
  background:none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map(){
  var myOptions = {
    scrollwheel: false, 
    draggable: false, 
    zoom:16,
    center:new google.maps.LatLng(25.841211,-80.308539),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(25.841211,-80.308539),
    icon: 'http://www.ssglobalsupply.com/images/location-contact.png'
  });
  infowindow = new google.maps.InfoWindow({
    content:'6891 NW 74th St Medley, FL 33166<br>'
  });
  google.maps.event.addListener(marker, 'click', function(){
    infowindow.open(map,marker);
  });
  infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center); 
});
</script>

The size arguments are in pixels. So, to double your example's marker size the fifth argument to the MarkerImage constructor would be:

    new google.maps.Size(42,68)

Check the link for steampowered's answer to get more details


Here is the JSFIDDLE for your icon marker size 50px x 50px

      var image = {
      url: 'http://www.ssglobalsupply.com/images/location-contact.png',
      // This marker is 50 pixels wide by 50 pixels high.
      size: new google.maps.Size(50, 50),
      // The origin for this image is (0, 0).
      origin: new google.maps.Point(0, 0),
      // The anchor for this image is the base of the flagpole at (0, 32).
      anchor: new google.maps.Point(0, 32)
    };

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM