Question

I have this cide to duplicate an icon from a previously declared marker, but it does not work:

map = new google.maps.Map(document.getElementById('map'), {
  zoom:12,
  center:latlng2,
  mapTypeId:google.maps.MapTypeId.SATELLITE
});

marker = new google.maps.Marker({
  map:map,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

var babyIcon = new google.maps.MarkerImage(marker.getIcon(),
  new google.maps.Size(
      marker.getIcon().size.width * this.iconScale_,
      marker.getIcon().size.height * this.iconScale_
  ),
  new google.maps.Point(0,0),
  new google.maps.Point (
      marker.getIcon().anchor.x * this.iconScale_,
      marker.getIcon().anchor.y * this.iconScale_ / 2
  )
);

// kill the shadow
babyIcon.shadow = null;

this.babyMarker_ = new google.maps.Marker({
  position:new google.maps.LatLng(0,0),
  icon: babyIcon,
  draggable:false,
  map:map
});

it does not work, the icon does not display and all that. Is there something I am missing?

Answer 1

You need to set the url of the MarkerImage, the property you need is .ra (don’t ask me)

var babyIcon = new google.maps.MarkerImage(
  marker.getIcon().ra,
  new google.maps.Size(
      marker.getIcon().size.width * this.iconScale_,
      marker.getIcon().size.height * this.iconScale_
  ),
  new google.maps.Point(0,0),
  new google.maps.Point (
      marker.getIcon().anchor.x * this.iconScale_,
      marker.getIcon().anchor.y * this.iconScale_ / 2
  )
);