Change point location of multiple custom marker icons Google Map API V3

Question

I need to be able to change the point location of marker icons, where each marker location has a separate icon. The icons need to be centered on the anchor point, not bottom-center as they are default...

I can't figure out how to do this without completely re-working my code...

var sites = [
['Photo 1', 36.33835943134047, -93.63535, 4, 'mylinkurl', 'images/marker1.png'],
['Photo 2', 36.315939, -94.440630, 2, 'mylinkurl', 'images/marker2.png'],
['Photo 3', 36.085890, -93.90175, 1, 'mylinkurl', 'images/marker3.png'],
   ['Photo 4', 36.09948, -93.28370, 3, 'mylinkurl', 'images/marker4.pngg']
];


function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: sites[5],
            title: sites[0],
            zIndex: sites[3],
            href: sites[4]
        });


    google.maps.event.addListener(marker, 'click', function() {     
        $.fancybox({
            href : this.href,
            width : 1000,
            maxHeight   : 666,
            fitToView   : true,
            autoSize    : false,
            type: 'iframe',
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            aspectRatio : true,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            iframe : { scrolling : 'no'
            },
            preload   : false
        });
    });
     arrMarkers.push(marker);
    }

}

I have found this code, but I can't figure out how to integrate it...

 anchor: new google.maps.Point(16, 34)

---

Thank you for that. I think my struggle is I don't know how to integrate that into my code... I need that icon url to come from the string... trying this, but it's not working:

    function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);                    
  var icon = { 
         url: sites[5],
         size: new google.maps.Size(40,40),
         anchor: new google.maps.Point(20,20)
       };
      var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: sites[5],
            title: sites[0],
            zIndex: sites[3],
            href: sites[4]
        });

Answer 1

If you were using native Google Maps API v3 icons I would have said the below. Which is what your question asked.

However, on the map to which you provided a link (1), you are using a KMZ file for the Open House markers (2), are those the icons you are concerned about? To center those you need to add the hotSpot tag

(1)     http://url/

(2)     http://url/OpenHouse.kmz

<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction">

(which it looks like you have in at least some places)

=============================

If your icons are all 40px x 40px and need to be centered over the point. Look at the google.maps.Icon definition:

google.maps.Icon object specification
Properties | Type   | Description
anchor     | Point  | The position at which to anchor an image in correspondance to the     location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
origin     | Point  | The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).
scaledSize | Size   | The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
size       | Size   | The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.
url        | string | The URL of the image or sprite sheet.

You need:

var icon = { 
             url: 'your/URL/for the icon",
             size: new google.maps.Size(40,40),
             anchor: new google.maps.Point(20,20)
           };