Replace google map MARKER with HTML element - html

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

I realize that you've developed your own solution in the comments but for anyone looking for a simpler solution to this problem I would suggest looking into the Marker With Label library.
The library adds a DOM element along with each marker (designed to add a text label ect to each item, personally I've always used it for numbering), that could easily be utilized to allow for an image to be placed at each location. This could be used instead of the marker as Dr.Molle suggests, or in addition to. You are able to use the offset option to place the element in relation to the marker and so using z-index could overlay the image on top.
Here is a simple example of using an image as a label, taken from here:
<style type="text/css">
.labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
width: 100px;
white-space: nowrap;
}
</style>
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var pictureLabel = document.createElement("img");
pictureLabel.src = "home.jpg";
var marker = new MarkerWithLabel({
position: homeLatLng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: pictureLabel,
labelAnchor: new google.maps.Point(50, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.50}
});
var iw = new google.maps.InfoWindow({
content: "Home For Sale"
});
google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
To position and overlay the image use the following options:
labelStyle: {top: "-30px", left: "-3px"},
labelZIndex: 2
Note that the positions are arbitrary and may require some tweaking. As an aside (and unrelated), I really like the idea of using an avatar in addition to the marker.