1
 var icon = {
                    url: pointer.png,
                    size: new google.maps.Size(48,48),
                    origin: new google.maps.Point(0,0),
                    anchor: new google.maps.Point(24,24)
                  };

var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    icon: icon
                  });

Is it possible to add second image to the marker? I'd like to have double marker for same point, 1 overlaid on top of the other.

I want to have little flag of country next to marker.

Possible?

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • possible duplicate of [Best way to display a custom Google maps multiple image marker icon](http://stackoverflow.com/questions/18838259/best-way-to-display-a-custom-google-maps-multiple-image-marker-icon) – geocodezip Jan 27 '14 at 21:21

1 Answers1

3

Prior to the API v3.14, you hack this with a icon and a shadow image file together on the same marker.

Here's how I would solve it with v3.14+

function initialize() {
    google.maps.visualRefresh = true;
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(0, 0),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(0, 0),
        map: map
    });

    // CREDIT: https://developers.google.com/maps/documentation/javascript/markers
    marker.flag = new google.maps.Marker({
        icon: {
            url: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png',
            anchor: new google.maps.Point(32, 32)
        }
    });

    marker.flag.bindTo('position', marker);
    marker.flag.bindTo('map', marker);

}

google.maps.event.addDomListener(window, 'load', initialize);

See: http://jsfiddle.net/stevejansen/J5swt/

Steve Jansen
  • 9,398
  • 2
  • 29
  • 34
  • This is awesome thanks! Yes I've read about shadow solution, but it didn't seem right. Btw, is there a way to dictate which goes in front or back? z-index of marker and flag? –  Jan 28 '14 at 09:09
  • What about solution of using canvas to merge images? Is there any drawback for using your solution? like speed if there are 10000 markers? doubled to 2x? –  Jan 28 '14 at 11:52
  • I agree that an HTML canvas, or possible server side icon generation, would be a more elegant solution. Doubling the number of markers will impact performance as the number of markers increases. There are other solutions to the problem of [too many markers](https://developers.google.com/maps/articles/toomanymarkers), such as making all markers invisible except for markers within the active map viewport. This is a quick and dirty solution. – Steve Jansen Jan 28 '14 at 15:01