[GIS] Replace google map MARKER with HTML element

google mapslabelingmarkersoverlaytransparency

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

Best Answer

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.