I want to add a custom HTML element (that can become transparent dynamically) instead of a marker.

Basically my html object would be a cirle (or rounded pin) with a picture of users in the middle.

I have imagined different solutions:

  • place a label (containing HTML) covering the marker which visibility would be set to none
  • work with overlays
  • hard way: replace the marker with a PNG image that I should compose dynamically with some sort of library superimposing two images (one geometric and the other user picture).

Anyway I can't figure out what to do and how to do it.

Thanks, Stefano


EDIT: Im going to expand my answer further, but unfortuneately I don't have the time to put together a coherent and concise code example. Links will have to do for now :)

Regarding the 3 options above:

  1. Covering the marker with anything is hard, since this will be rendered in canvas and you would probably go down the route of an overlay anyway, so:
  2. Work with overlays - you could create custom overlay functionality using the google.maps.OverlayView class. This allows you to place HTML markup on the map - see an example here: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
  3. You could create a marker image on the server, but consider that it may be easier to draw this on a canvas element and export the image (as a data uri). This would keep your code on the client. You may have to use a polyfil / not support IE8 though as it does not have native canvas support.
|improve this answer|||||
  • we prefer longer answers. please explain how to use the custom overlay and not just give link only examples. – Brad Nesom Jan 14 '15 at 15:41
  • I can't see how down voting the answer is constructive. – James Westgate Jan 14 '15 at 16:31
  • If you assume i downvoted you are incorrect. I just made a suggestion – Brad Nesom Jan 14 '15 at 18:44

Thanks for your answer!

The solution I found more appropriate and clean is using Canvas indeed

I paste the key part of the code. - Icon variable is the key for Google Map - The call back is a function that takes the variable Marker (since the construction of Canvases can be asynchronous.)

            var canvas = document.createElement("canvas");

            var ctx = canvas.getContext("2d");
            ctx.canvas.width = 38 * scale;
            ctx.canvas.height = 46 * scale;

            var sources = {
                pin: createPin(colorPin, scale),
                photo: dataPhoto                

            loadImages(sources, function(images) {
                ctx.drawImage(images.pin, 0, 0);
                ctx.drawImage(images.photo, 5 * scale, 3 * scale);

                var icon = canvas.toDataURL();
                // creating a marker
                var latlng = new google.maps.LatLng(x, y);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: null,
                    title: title,
                    icon: icon,
                    iconOpaque: icon,
                    iconTransparent: null,
                    triggerObj: null


Rather than a complete example, this is meant to be a starting point for further research online.

Cheers, Stefano

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.