Adding a Traffic Map

Hi all
I want to add a traffic map to one of my layouts.
I believe I should use Embedded section but I don’t know how.
I checked the documentations but I would appreciate if someone can instruct me specifically for traffic map example.

Thanks and regards

If I remember, you can get examples from google themselves how to show traffic on the map. I then created a web page to show this, then embedded it into xibo to get the result.

Hope it helps.

You will need Google Maps js api key - documentation - Traffic Layer  |  Maps JavaScript API  |  Google Developers

Then on your layout you add new embedded html item like this:

HTML to Embed
<div id="map"></div>

Custom Style Sheets

  #map {
    height: 100%;

HEAD content to Embed (including script tags)

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 42.6055556, lng: -83.15},
    disableDefaultUI: true

  var trafficLayer = new google.maps.TrafficLayer();
function EmbedInit() {


Obviously you replace the YOUR_API_KEY ,with, well with your google api key.

zoom and center line should be self-explanatory
disableDefaultUI: true
gets rid off ‘pin man’ and zoom UI - you can leave it at false or delete that line if you’d rather see this UI.


Great, it works. But I want to add Istanbul’s traffic map instead of this screen. How is it possible?

The above is just an example.

You will want to change this line to latitude and longitude of what you want to show.

Hahaha just realized it. Such a silly question. How can I determine my city’s coordinates on google maps

You can put the whole address there or just Istanbul then on the map find the exact region you want to show in Xibo, click the get GPS coordinates button - then put that latitude and longitude in your embedded html.

1 Like

I want to do same project but a little different.
I use google map. I have a address dataset table.
I want to set “lat” and “Ing” values from the address dataset tables.
How can I do this. Please help me.

center: {lat: 42.6055556, lng: -83.15},

For info, 1.8 now comes with a Google Traffic map as standard.

You can’t take the data from a dataset.

With the 1.8 module that does this, you can use the Display location as defined in the display record instead, so traffic for the displays location is shown.