CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user796443
user796443

Reputation:

google maps api v3 double image for icon

 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?

Upvotes: 1

Views: 1144

Answers (1)

Steve Jansen
Steve Jansen

Reputation: 9492

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/

Upvotes: 3

Related Questions