Google Maps API - is only traffic level displayed?
I am using the Google Maps API to display traffic conditions in my area, and I was wondering if it is possible to hide the actual part of its map so that only the traffic level can be seen (green / red / yellow lanes and road names will be visible, but the background will be transparent or solid color instead of displaying 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 rough example of what I'm trying to accomplish:
+3
source to share
2 answers
In the style master , this gives me a blank card.
[
{
"stylers": [
{ "visibility": "off" }
]
}
]
snippet of code:
$(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"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
+7
source to share
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);
+1
source to share