CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
StuStirling
StuStirling

Reputation: 16211

Text Within Polyline Google Maps V3

I need to be able to put text within my polyline like the embedded Google Maps does as you can see from the below screenshot...

Google Maps Screenshot

Now I have looked through the PolylineOptions API Reference and the Polyline but I can't see anything the points to achieving this. I really hope this is possible and I'm not going to have to hack something together.

Upvotes: 4

Views: 12303

Answers (3)

Josh Jobin
Josh Jobin

Reputation: 136

I commented yesterday asking if there might be any current way to add text within polylines. I know this question has been resolved, but the last activity I can see was in 2014. I came across this library in github https://github.com/googlemaps/js-map-label

It allows a user to overlay text on the map with (see also examples folder): 

    var mapLabel = new MapLabel({
        text: 'Route name',
        position: pointCoordinate,
        map: map,
        fontSize: 12,
        align: 'left',
    });

Note, their source code within the "onAdd" method applies the pane to the map level, meaning the text would be underneath polylines. So, instead, I added it to the floatShadow pane by:

panes.floatShadow.appendChild(canvas);

Instead of:

panes.mapPane.appendChild(canvas);

I was able to make my map look like: enter image description here

Upvotes: 2

nilni
nilni

Reputation: 673

Here is a Post Worth look at, Describing how to add labels to polylines:

http://duncan99.wordpress.com/2013/02/28/google-maps-api-polylines-and-events/

Upvotes: 3

geocodezip
geocodezip

Reputation: 161384

Adding text to polylines is not (currently) supported by the Google Maps Javascript API v3. You will need to create your own custom overlays to implement that. (I doubt you can make the text "follow" the polyline along a curve easily)

Upvotes: 0

Related Questions