Adding text overlay to Google Maps

Question

This is such a simple problem, but I can't find an answer anywhere...

I have a python script that returns a bunch of numbers that represents the total number of items for a given geographic region. I have a bunch of .kml files that I made that represent the geographic bounds for each region. I want to take those numbers created by the script and paste them over top the matching .kml overlay. I can't figure out how to do this. I know how to add the .kml files, but I can't figure out how to do the text. Theres a lot of information on Google's site on how to add marker icons, polylines, even images to the map, but I can't find how to add just a simple bit of text.

Answer 1

You can translate from the latitude, longitude to a pixel offset within the map div with the fromLatLngToDivPixel method of the GMap2 object.

To show a div at that pixel offset you need to attach it to the appropriate map div. The map is actually made up of multiple layered divs called panes. You can access the div for a particular pane using the GMap2.getPane method. You can try out inserting your div on any of the panes described in the GMapPane enum.

So to summarize:

• Attach your absolutely positioned text div (display: none) to the appropriate pane div.
• Take your latitude and longitude and translate it to a map div pixel offset.
• Set the top and left attributes of your absolutely positioned text div and display it.

Answer 2

There are a few third-party extensions that will help you to easily accomplish this. Try the ELabel. It works like this:

var label = new ELabel(new GLatLng(44.3,-78.8), "Utopia", "style1");
map.addOverlay(label);