Adding Cit Labels on top of Polygon

2,709 views
Skip to first unread message

pkuong

unread,
Jun 10, 2011, 2:15:46 PM6/10/11
to Google Maps JavaScript API v3
I've been trying to find a way to put the city labels above the
google's polygon. So I was thinking that may be I can somehow create a
layer of labels and put that layer on top of the polygon's pane (which
is "OverlayLayer")

But the problem is, the only way I can get that "label layer" so far
is through using the following code to get the tiles:

var labelTiles = {
getTileUrl: function(coord, zoom) {
$("#tile").val("x:"+coord.x+" y:"+coord.y+" z:"+zoom);
return "http://[some public tile server]/"+zoom+"/"+coord.x
+"/"+coord.y+".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
};
var googleLabelLayer = new google.maps.ImageMapType(labelTiles);
map.overlayMapTypes.push(googleLabelLayer);

This get the Labels layer as an "ImageMapType", which sits at the
"mapPane" pane.

Is there a way to "generate" an image from this ImageMapType layer and
put the image on OverlayImage pane, which sits on top of the polygon's
layer?

Bob Torzynski

unread,
Jun 12, 2011, 9:10:59 PM6/12/11
to Google Maps JavaScript API v3
Hi Paulo,

You could probably create a layer as you propose but you might want to
consider using InfoBoxes (developed by Gary Little). Put the latitude
and longitude for features that you want to label (e.g., cities,
counties, any type of points) in a JSON file that also includes the
names then use the JSON file to populate the labels. In this example:
http://ny.zgroks.com I have labeled the 62 Counties in New York State.
These labels use an invisible marker as an anchor. This allows the
user to move the labels after they're generated (say, if you want to
print the screen).

If you 'view source' in the example you can see how the JSON file is
laid out, and how to include the InfoBox. It's probably not the best
solution but it's fairly easy to set up.

Regards,
Bob

On Jun 10, 2:15 pm, pkuong <paulo.ku...@gmail.com> wrote:
> I've been trying to find a way to put the city labels above the
> google's polygon. So I was thinking that may be I can somehow create a
> layer of labels and put that layer on top of the polygon's pane (which
> is "OverlayLayer")
>
> But the problem is, the only way I can get that "label layer" so far
> is through using the following code to get the tiles:
>
> var labelTiles = {
>                     getTileUrl: function(coord, zoom) {
>                                 $("#tile").val("x:"+coord.x+" y:"+coord.y+" z:"+zoom);
>                         return "http://[somepublic tile server]/"+zoom+"/"+coord.x

Chris Broadfoot

unread,
Jun 12, 2011, 11:36:21 PM6/12/11
to google-map...@googlegroups.com
Unfortunately the API doesn't offer a label layer.

If you have your own geodata for labels (text with associated lat/lng, etc), you can achieve something similar to what you want using MapLabel:


Chris


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.




--
http://twitter.com/broady
Reply all
Reply to author
Forward
0 new messages