javascript - How to put Google Map labels on top?

Question

I am working with polylines in google map. Basically i am trying to draw a line on several roads using polyline.

Now those polylines are blocking(on top) road labels. I have changed the opacity level for better viewing but i really want Google map labels on top.

I have studied styling maps, but i havent found any suitable solutions. Is there a way to do it?

Thanks in advance.

Answer 1

The tiles(which contain the ground, label, streets etc. ) are delivered as single images, not as layers, so there is no way to put anything between particular features that are shown in the tiles.

But there may be approaches.

Let's assume you have 2 (synchronized) maps, 1 complete map and 1 map where you only display the labels.

When you place the map with the labels on top of the other map it would be able to get the desired effect(which does not mean that I would suggest to it it, I just like to avoid to say "impossible")

Demo: http://jsfiddle.net/geocodezip/tq5zmre3/

code snippet:

// Setup the default map
latlng = [-6.2087634, 106.84559899999999];
latlng = new google.maps.LatLng(23.062521089244896, -68.78645340625002);

map = new google.maps.Map(document.getElementById('map'), {
  disableDefaultUI: true,
  styles: [{
    "elementType": "labels",
    "stylers": [{
      "visibility": "off"
    }]
  }],

  mapTypeId: google.maps.MapTypeId.ROADMAP
});
map2 = new google.maps.Map(document.getElementById('map2'), {
  mapTypeControl: false,
  backgroundColor: 'hsla(0, 0%, 0%, 0)',
  zoom: 5,
  styles: [{
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "elementType": "labels",
    "stylers": [{
      "visibility": "on"
    }]
  }],
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.bindTo('center', map2, 'center');
map.bindTo('zoom', map2, 'zoom');



new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(15.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 1,
  map: map
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" class="map"></div>
<div id="map2" class="map" style="top:-100%;"></div>