How do I add a traffic screen?

Use the TelVue app

You can display a Google traffic map in InfoVue, customized to your region. To do this, you would first create the fullscreen map as an item in your Content Library, and then add that to a template.

 

  1. First generate the traffic map URL for your area:
    1. Add your zipcode at the end of the following URL (in this example we’ll use 08054): https://infovue.telvue.com/Apps/trafficMap.html?address=08054
    2. Preview the map by viewing that URL in any browser
    3. To zoom in or out of that map, add &zoom= to the end of the string. The larger the number, the more it will zoom in. Zoom=13 is the default, so to zoom in a bit, you would use something like: https://infovue.telvue.com/Apps/trafficMap.html?address=08054&zoom=15
    4. To zoom out: https://infovue.telvue.com/Apps/trafficMap.html?address=08054&zoom=11
  2. Then add that URL to the InfoVue Content library
    1. In the InfoVue UI, Right-click under the Content tab → Add → URL
    2. Name this map
    3. Enter the URL from Step 1 to the URL field
  3. Finally, add that map to a template
    1. Open a template designer
    2. To add the traffic map, click on the Media search bar on the right
    3. Search by name for the traffic map you just created
    4. Drag the thumbnail on to your template
    5. Size and position the map
    6. Add whatever text, shape, other zones you might want to use to label or embellish the map
    7. Save

Note that as of June 11, 2018, Google revised its maps and APIs policies. Many of the map APIs and functions now require an API key, and charges are incurred after a certain number of hits. The TelVue traffic maps URL described above continues to use the freely available APIs that do not require a key.

How to fine tune the center point

Note:  If the map center is not precise enough, go to http://maps.google.com and pan and zoom the map until you have the map you want.

After a few seconds of not touching anything, the url will resolve to something of this form: https://www.google.com/maps/@39.928331,-74.9584449,15z

The simplest thing at this point is to not even use the application, but to select traffic from the hamburger menu, and the url will change to https://www.google.com/maps/@39.928331,-74.9584449,15z/data=!5m1!1e1

At this point, you can use this url verbatim as an html element in InfoVue, (without the need to redirect through the TelVue traffic app).

Alternatively, you can extract the lat/lng from the url, and insert it into the InfoVue url above. (The final url for this example would be http://infovue.telvue.com/apps/trafficMap.html?lat=39.928331&lng=-74.9584449&zoom=15.)

It will display the Google search bar, but you can hide this with a Shape (like a title banner) or expand the dimensions of the traffic map “zone” in InfoVue to extend beyond the dimensions of your template.

How to get your own Google Maps API

If you would like to integrate traffic maps without showing the Search bar or icons at the bottom, you can acquire your own key from Google, and use the Maps Embed API or Javascript API to customize. Ultimately you will need to make an HTML file that uses the key, zip that file, and upload it to the InfoVue CMS. A web developer would be best suited to achieving this.

Here is a link to how to get an API Key:
https://developers.google.com/maps/documentation/embed/get-api-key

and how to use Embed API with a key:
https://developers.google.com/maps/documentation/embed/guide#forming-the-url

in IV FAQs

Related Articles