How to add custom street names on Google Maps?

Question

So you want to add custom street names or other labels on your Google Map? For example on this location. After learning current (3.6) google map js API you have these possible options:

• KmlLayer (not works now)
• GroundOverlay (works!)
• OverlayView (should work)

KmlLayer "...adds geographic markup to the map from a KML, KMZ or GeoRSS file that is hosted on a publicly accessible web server...”. We can try this latest feature to add path with label. And it will work in Google Earth. But if path is too short – Google Earth will not show us a label. Workaround for short path is just make it long by adding start and end points few times:

<coordinates>
  55.043196,82.907145 55.043473,82.909902
  55.043196,82.907145 55.043473,82.909902
  55.043196,82.907145 55.043473,82.909902
  55.043196,82.907145 55.043473,82.909902
</coordinates>

Then we already see our nice custom label in Google Earth, but in Google Map not. Most possible reason is that google earth's latest feature is too latest. Currently it’s a fail way, but may be later, google map's KML renderer will take that feature into account.

GroundOverlay is "... a rectangular image overlay on the map ...". All is much simple.

Create image:

1. Open your Google Earth (make sure your latitude/longitude settings are Mercator) and go to your location
2. Add one pixel white image on your area and make it 33% transparent
3. Go to properties / place tab of your image overlay and copy latitudes/longitudes from there
4. Make screenshot in Google Earth and paste it to your favorite graphic editor
5. Crop image to the borders of your white transparent area
6. Add layer, where you will add your custom labels and add them
7. Switch off your base layer and save the result as png, for example overlay.png

Add the resulting image to your google map as:

google.maps.event.addDomListener(window, 'load', function() {
  var mapDiv  = document.getElementById('map'),
      opts    = {mapTypeId: google.maps.MapTypeId.HYBRID},
      map     = new google.maps.Map(mapDiv, opts),
      area    = new google.maps.LatLngBounds(
        new google.maps.LatLng(55.042297, 82.906337),
        new google.maps.LatLng(55.043862, 82.910473)
      ),
      overlay = new google.maps.GroundOverlay(
        'overlay.png', area, {map: map, clickable: false}
      );

  map.fitBounds(area);
});

OverlayView you can try by yourself.

ps: Is this a correct format for article? Or may be it should be a community wiki?

Answer 1

I created a MapLabel utility library a while ago. While it doesn't have any rotation or text-on-path capabilities (I'd love to see you add it!), it does let you put text on a map.