在一个Google Maps Marker中包含3张图像

Question

I'm trying to have this done using Google Maps API. I tried several javascript plugins such as components from google-maps-utility-library-v3 but nothing seems really done for this purpose.

Basically what I'm trying to do is to have one shadow layer, one user's picture layer and over it one layer for the marker image. My marker image has a transparent hole in it, so I'd like the user's face to be shown in that hole which is why I'm trying to do this.

What I have right now is pretty simple:

var shadow = {
    url: '/data/images/map/pin_shadow.png',
    size: new google.maps.Size(108, 95),
    anchor: new google.maps.Point(30, 47)
};

var image = {
    url: '/data/images/map/pin.png',
    size: new google.maps.Size(60, 95),
    anchor: new google.maps.Point(30, 47)
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(venue.lat, venue.lng),
    map: map,
    icon: image,
    shadow: shadow
});

I was wondering if anyone has ever did this?

EDIT: I'd better like a client-side solution though. Thanks

I wish I could add another image between the shadow and the image. Any idea?

Thanks and have a nice day!

Answer 1

You could try something like this :

create pin images on the fly from PHP/.NET/JSP/...

var image = {
    url: 'my_script.php?user=12345',
    size: new google.maps.Size(60, 95),
    anchor: new google.maps.Point(30, 47)
};

I don't know which language you use so here's a script pseudo-code :

Set headers to print script as image
if image exists for specified user : 
    return this image;
else
    create image for user with the 3 layers
    return image
end if