How to add a custom icon to a google map v3

Question

I have inherited some code below and all works fine. My question is how do I add a custom icon to this map? I have added one before but I don't know where I should put the code?

// initialize map
    var unitedKingdom = new google.maps.LatLng(55.378051, -3.435973);
    var options = {
        center: unitedKingdom,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 6
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();

    // fetch and iterate over the winners
    var current = 0;
    $.getJSON('JSON_FILE.txt', function (winners) {
        var popup = setInterval(function () {
            (function (winner) {
                var newCenter;
                var location = winner.name.split(', '); // winner.location seems a bit unreliable (sometimes null)
                geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        newCenter = results[0].geometry.location;
                        map.panTo(newCenter);
                        var contentStr = '<div class="infowindow">' + 
                                         '<p><strong>' + winner.name + '</strong> just won ' +
                                         '<strong>' + winner.displayAmount + '</strong> on ' + 
                                         '<strong>' + winner.game + '!</strong></p>' + 
                                         '</div>';
                        infowindow.setPosition(newCenter);
                        infowindow.setContent(contentStr);
                        infowindow.open(map);
                    }
                });
            })(winners[current]);
            // increment the current index, or reset it if we're on the last item
            current = (current < (winners.length-1)) ? (current+1) : 0;
        }, 3000)
    });

Answer 1

See the documentation on custom icons, it includes an example.

As to where to put the code, it needs to be in the call back function for the geocoder, "newCenter" is the position you probably want the marker at.

In your code:

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    newCenter = results[0].geometry.location;
                    map.panTo(newCenter);
                    var contentStr = '<div class="infowindow">' + 
                                     '<p><strong>' + winner.name + '</strong> just won ' +
                                     '<strong>' + winner.displayAmount + '</strong> on ' + 
                                     '<strong>' + winner.game + '!</strong></p>' + 
                                     '</div>';
                    infowindow.setPosition(newCenter);
                    infowindow.setContent(contentStr);
                    infowindow.open(map);
                }
            });

Add the custom marker like this:

geocoder.geocode({ address: location[1], country: 'UK' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    newCenter = results[0].geometry.location;
                    map.panTo(newCenter);
                    var marker = new google.maps.marker({
                       map: map,
                       position: newCenter,
                       icon: customIcon,
                       shadow: customIconShadow,
                       shape: customIconShape
                    });

                    var contentStr = '<div class="infowindow">' + 
                                     '<p><strong>' + winner.name + '</strong> just won ' +
                                     '<strong>' + winner.displayAmount + '</strong> on ' + 
                                     '<strong>' + winner.game + '!</strong></p>' + 
                                     '</div>';
                    infowindow.setPosition(newCenter);
                    infowindow.setContent(contentStr);
                    infowindow.open(map);
                }
            });

Define customIcon, customIconShadow and customIconShape as required for your custom icon.