Adding complex icon to the google map

Question

I need to represent the state of some devices from the db on the google map. Each device has it's location and complex status. Something like on line / off line / camera OK etc. For each status I need to draw a bubble next to the icon on the map (e.g. one green if device is on line and one red if camera is off line).

For example I have some marker:

new google.maps.Marker({
                position: currLatLng,
                map: map,
                icon: image
            });

And I need something like:

drawImageNextToTheMarker("myImg");

What is the easies way to do this?

Or is there any way to draw the html table with pictures centered at some position on the map?

Thank you.

Edit:

One solution I thought of is to make a image for each status with transparent background and to draw every image for for every status. It is not a nice solution and I will spend some time making those images but that is the best solution for now.

Answer 1

It would probably be easiest to create icons for each state and add the correct icon to the map (As long as you don't have a ton of variations).

icons

• icon_online_camera-on.gif
• icon_online_camera-off.gif
• icon_offline_camera-on.gif
• icon_offline_camera-off.gif

when adding the marker for the position add the correct icon.

---

EDIT

In light of new info here's another idea...

---

Have a dedicated place for icons. Maybe /images/device_icons/

Use a server side language to create a image file name in a consistent format

DEVICE-ID_ONLINE_CAMERA_OTHER-THING_LAST-THING.gif
3_1_0_1_3.gif // device - 3, online, camera off, other thing - 1, last thing -3

Then check for existence of the icon.

If it exists use the previously created version, if it doesn't exist use whatever language you're using to create the icon and save it. This way it will be easy to add devices and statuses, and you wont be creating the same icons on every page load like you will if youre using javascript .

Answer 2

I will answer my own question: Here is the way to write labels next to the marker:

http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html