CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
GRaAL
GRaAL

Reputation: 626

Google Maps: How to draw labels (country, city names, etc.) over my overlay

I need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.

For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?

I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.

Is there a working and, well, legal way to do that?

Here is jsfiddle which illustrates URL composing solution: https://jsfiddle.net/GRaAL/jyr81p2c/

// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
    return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}

Upvotes: 3

Views: 2159

Answers (2)

GRaAL
GRaAL

Reputation: 626

I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:

var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);

Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/

Upvotes: 5

Mr.Rebot
Mr.Rebot

Reputation: 6791

You might want to check MapLabel for Google Maps V3:

This library allows text to be added to the map at a particular location. Note that the user's browser must support Canvas for the label to be displayed.

MapLabel class

enter image description here

Note that browser <canvas> support is required for the label to be displayed. Analytics

Source:

https://github.com/googlemaps/js-map-label

How to add text label in Google Map API

Hope this helps

Upvotes: 1

Related Questions