CODEWITHSUNDEEP
google-maps
user13286
user13286

Reputation: 3075

Google Maps API - Showing only the traffic layer?

I am using the Google Maps API to show traffic conditions in my area and I was wondering if it was possible to hide the actual map portion of it so that only the traffic layer is visible(the green/red/yellow traffic lanes and road names would be visible, but the background would be transparent or a solid color instead of showing the map).

Here's what I have so far:

$(function() {
    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 12,
        center: new google.maps.LatLng(34.0204989,-118.4117325),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDoubleClickZoom: true,
        draggable: false,
        scrollwheel: false,
        panControl: false,
        disableDefaultUI: true
    });

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
});

Here's a crude example of what I am trying to accomplish: enter image description here

JSFiddle

Upvotes: 3

Views: 3423

Answers (2)

geocodezip
geocodezip

Reputation: 161374

from the documentation: visibility (on, off, or simplified) indicates whether and how the element appears on the map. A simplified visibility removes some style features from the affected features; roads, for example, are simplified into thinner lines without outlines, while parks lose their label text but retain the label icon.

On the styled map wizard, this gives me a blank map.

[
  {
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

proof of concept fiddle

code snippet:

$(function() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: new google.maps.LatLng(34.0204989, -118.4117325),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDoubleClickZoom: true,
    draggable: false,
    scrollwheel: false,
    panControl: false,
    disableDefaultUI: true,
    styles: [{
      "stylers": [{
        "visibility": "off"
      }]
    }]
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
});
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

Upvotes: 10

amit gupta
amit gupta

Reputation: 1330

you can try this :

    var map = new google.maps.Map(document.getElementById("map-canvas"),
{
    zoom: 12,
    center: new google.maps.LatLng(34.0204989,-118.4117325),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
        {
            featureType: 'poi',
            stylers: [
                { visibility: 'off' }
            ]
        },
        {
            featureType: 'road',
            stylers: [
                { visibility: 'off' }
            ]
        },
        {
            featureType: 'transit',
            stylers: [
                { visibility: 'off' }
            ]
        },
        {
            featureType: 'landscape',
            stylers: [
                { visibility: 'off' }
            ]
        },
        {
            elementType: 'labels',
            stylers: [
                { visibility: 'on' }
            ]
        }
    ]

});

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Upvotes: 1

Related Questions