Replace google map MARKER with HTML element

Question

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

Answer 1

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.

Answer 2

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
                });

                callback(marker);                   
            });

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

Cheers, Stefano