Google Open Lcoation Code demos (borrowed from https://github.com/google/open-location-code/blob/master/tile_server/example.html)

<!doctype html>

<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
            integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
            crossorigin=""></script>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.1.3/build/ol.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <style>
      html,body {
        font-family: 'Roboto', sans-serif;
        font-weight: 100;
      }
      h2 {
        font-weight: 100;
      }
      .map {
        height: 600px;
      }
      #ol_vector_code {
        background: white;
        border-radius: 2px;
        font-size: 24px;
        padding: 5px;
        position: absolute;
        text-align: center;
        top: 10px;
        left: 50px;
        min-width: 200px;
      }
    </style>
    <title>Tile layers examples</title>
  </head>
  <body>
    <h2>OpenLayers vector WMS tiles</h2>
    <p>
      Uses the option <code>zoomadjust=2</code> to fetch a more detailed grid level than the
      default.
    </p>
    <div style="position: relative;">
      <div id="ol_vector_xyz" class="map"></div>
      <div id="ol_vector_code">Click cell, get plus code</div>
    </div>

// Create the vector layer.
      var olVectorLayer = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
          maxZoom: 25,
          attributions: 'plus.codes',
          format: new ol.format.GeoJSON(),
          // Using WMS tile numbering.
          url: gridServer + 'wms/{z}/{x}/{y}.json?zoomadjust=2'
        }),
      });
      // Create the map, with Openstreetmap map tiles and the vector layer.
      var olVectorMap = new ol.Map({
        target: 'ol_vector_xyz',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          olVectorLayer,
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([8.54, 47.5]),
          zoom: 4
        })
      });
      // Define an action so that clicking on the map will display the global code.
      var selectPointerMove = new ol.interaction.Select({
        condition: ol.events.condition.click
      });
      selectPointerMove.on('select', (e) => {
        document.getElementById("ol_vector_code").innerHTML =
          e.target.getFeatures().getArray()[0].get("global_code");
      });
      olVectorMap.addInteraction(selectPointerMove);
    </script>

<h2>OpenLayers image TMS tiles</h2>
    <p>
      Uses the options <code>linecol=0xff0000ff&labelcol=0xff000060</code> to set the lines to
      red and the labels to a non-opaque red.
    </p>
    <div id="ol_image_tms" class="map"></div>

<h2>Leaflet image TMS tiles</h2>
    <p>
    <div id="ll_image_tms" class="map"></div>

<h2>Google Maps API image WMS tiles</h2>
    <div id="g_image_wms" class="map"></div>

Updated missing url https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js to https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.1.3/build/ol.js

https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js

https://maps.googleapis.com/maps/api/js