Geek Answers Handbook

Adding a complex icon to a google map

I need to present the status of some devices from db on google map. Each device has a location and complex status. Something like the line / off line / camera OK, etc. For each state, I need to draw a bubble next to the icon on the map (for example, one green if the device is online and one red if the camera is turned off).

For example, I have a marker:

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

And I need something like:

drawImageNextToTheMarker ("myImg");

What is the way to alleviate this?

Or is there a way to draw an html table with pictures located at a specific position on the map?

Thanks.

Edit:

One solution that I was thinking about is to create an image for each state with a transparent background and draw each image for each state. This is not a good solution, and I will spend some time creating these images, but this is the best solution at the moment.

+4
source share
2 answers

I will answer my question: Here is how to write tags next to the marker:

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

+1
source

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

the icons

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

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

EDIT

In light of the new information, here is another idea ...

You have a dedicated space for the icons. Maybe /images/device_icons/

Use server side language to create image file name in 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 the badge.

If it exists, use the previously created version; if it does not exist, use whatever language you use to create the icon and save it. Thus, it will be easy to add devices and statuses, and you will not create the same icons on every page load, as if you were using javascript.

+1
source

More articles:


All Articles