H2R Graphics v2
  • Return to h2r.graphics
  • What is H2R Graphics?
  • Getting started
  • Launcher
  • Control
    • Rundown
    • Data source
      • YouTube live chat
      • HTTP listener
      • SocialStream.ninja
    • Variables
    • Social
  • Output
    • Output window
  • Graphics
    • Time
    • Map
  • Theme
    • Fonts
    • Colours
    • Custom CSS
  • How to use with
    • ATEM
    • OBS
    • vMix
  • Pro
    • What is Pro?
    • Multiple projects
    • Multiple outputs
    • Pro graphics
  • API
    • HTTP
    • Companion
    • OSC
  • Issue or feedback?
  • Manual backup
Powered by GitBook
On this page
  • How it works
  • Getting a Maps JavaScript API key
  • Showing comments

Was this helpful?

  1. Graphics

Map

Added in H2R Graphics v2.14

PreviousTimeNextFonts

Last updated 2 years ago

Was this helpful?

The `Map` graphic is H2R Graphics is perfect for seeing where your live stream audience is watching from.

In combination with the `Social` graphic, the `Map` graphic displays a location pin based on a location mentioned in a live stream comment.

How it works

The Map graphic can be added just like any other graphic.

Additionally, add a `Social` graphic to your rundown which will be used for showing messages and extracting pin information.

Getting a Maps JavaScript API key

Sign in

Once signed in, use the ‘Select a Project’ modal to create a new project, name it whatever you want.

APIs and services

Once created, you will be directed to the ‘APIs and services’ page. From here you can choose ‘+ Enable APIs and services’.

Adding the Maps JavaScript API

Use the search box to add these two APIs:

  • Maps JavaScript API

  • Places API

Search the API by name and then use the "Enable" button to add them.

Credentials

Once the API is enabled, there will be a ‘Credentials’ tab on the left, click on that. On the credentials page there will be a ‘+ Create credentials’ option at the top, click that, then choose ‘API Key’.

Your API key

If everything went well, you will get a modal pop up with your API key for use in H2R Graphics. Copy/paste it into the software settings.

Showing comments

Click on any Social graphic that includes a location and bring it on air.

If the app is able to, it will extract the location information within the text of the comment and add a pin to the Map graphic.

This works well for phrases like...

  • Hello from Paris, France.

  • John here, watching from the USA.

  • Hello from Melbourne, Australia!

Use your Google account to sign in to Create a project in the Google developer console

http://console.developers.google.com
Map with a pin added