How to use olgm - 10 common examples

const map = new Map({
  // use OL3-Google-Maps recommended default interactions
  interactions: defaultInteractions(),
  layers: [
    googleLayer,
    osmLayer,
    wmtsLayer
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 4
  })
});

const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();

document.getElementById('toggle').addEventListener('click', function() {
  googleLayer.setVisible(!googleLayer.getVisible());
  osmLayer.setVisible(!osmLayer.getVisible());
});

layers: [
    googleLayer,
    osmLayer,
    tileWMSLayer,
    tileWMSLayer2,
    imageWMSLayer,
    imageWMSLayer2
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 4
  })
});

const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();

document.getElementById('toggleOSM').addEventListener('click', function() {
  googleLayer.setVisible(!googleLayer.getVisible());
  osmLayer.setVisible(!osmLayer.getVisible());
});

document.getElementById('toggleWMS').addEventListener('click', function() {
  tileWMSLayer.setVisible(!tileWMSLayer.getVisible());
  tileWMSLayer2.setVisible(!tileWMSLayer2.getVisible());
  imageWMSLayer.setVisible(!imageWMSLayer.getVisible());
  imageWMSLayer2.setVisible(!imageWMSLayer2.getVisible());
  const spanText = tileWMSLayer.getVisible() ? 'tiled' : 'image';
  document.getElementById('currentMode').innerHTML = spanText;
});

const map = new Map({
  // use OL3-Google-Maps recommended default interactions
  interactions: defaultInteractions(),
  layers: [
    regularLayer,
    themedLayer
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 12
  })
});

const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();

document.getElementById('toggle').addEventListener('click', function() {
  regularLayer.setVisible(!regularLayer.getVisible());
  themedLayer.setVisible(!themedLayer.getVisible());
});

interactions: defaultInteractions(),
  layers: [
    osmLayer,
    tileWMSLayer,
    imageWMSLayer,
    googleLayer,
    vector
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 4
  })
});

const olGM = new OLGoogleMaps({
  map: map,
  watch: watchOptions
}); // map is the Map instance
olGM.activate();


document.getElementById('toggleOSM').addEventListener('click', function() {
  googleLayer.setVisible(!googleLayer.getVisible());
  osmLayer.setVisible(!osmLayer.getVisible());
});

document.getElementById('toggleWatch').addEventListener('click', function(event) {
  if (event.target.matches('input')) {
    const option = event.target.value;
    watchOptions[option] = !watchOptions[option];
    olGM.setWatchOptions(watchOptions);

const map = new Map({
  interactions: interactions,
  layers: [
    googleLayer,
    osmLayer,
    vector
  ],
  target: 'map',
  view: new View({
    center: center,
    rotation: Math.PI / 3,
    zoom: 12
  })
});

const olGM = new OLGoogleMaps({
  map: map,
  mapIconOptions: {
    useCanvas: true
  }}); // map is the Map instance
olGM.activate();


document.getElementById('toggle').addEventListener('click', function() {
  googleLayer.setVisible(!googleLayer.getVisible());
  osmLayer.setVisible(!osmLayer.getVisible());
});

target: 'map',
  view: new View({
    center: center,
    zoom: 12
  })
});

const olGM = new OLGoogleMaps({
  map: map
});

// Get the map in the overview box
const overviewMap = overviewMapControl.getOverviewMap();

// Setup an instance of olGM for the overview
const overviewOLGM = new OLGoogleMaps({
  map: overviewMap
});

// Activate it
overviewOLGM.activate();

// Activate the main map only when google maps is done loading in the overview.
google.maps.event.addListenerOnce(overviewOLGM.gmap, 'idle', function() {
  olGM.activate();
});

document.getElementById('toggle').addEventListener('click', function() {
  googleLayer.setVisible(!googleLayer.getVisible());
  osmLayer.setVisible(!osmLayer.getVisible());
});

layers: [
    googleLayer,
    osmLayer,
    imageWMSLayer,
    imageWMSLayer2,
    tileWMSLayer,
    wmtsLayer
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 4
  })
});

const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();
createLayerTree();

function createLayerTree() {
  const layerTreeElement = document.getElementById('layerTree');
  layerTreeElement.innerHTML = '';
  const layers = map.getLayers();

  for (let i = layers.getLength() - 1; i >= 0; i--) {
    const layer = layers.getArray()[i];

    const item = document.createElement('div');
    item.style.backgroundColor = layer.color;
    const moreText = layer.getVisible() ? '' : '(invisible) ';
    const itemText = document.createTextNode(moreText + layer.name);

interactions: defaultInteractions(),
  layers: [
    googleLayer,
    osmLayer,
    tileJSONLayer,
    imageWMSLayer,
    vectorLayer
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 4
  })
});

const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();

document.getElementById('toggle').addEventListener('click', function() {
  googleLayer.setVisible(!googleLayer.getVisible());
  osmLayer.setVisible(!osmLayer.getVisible());
});

const googleLayer = new GoogleLayer();

const map = new Map({
  // use OL3-Google-Maps recommended default interactions
  interactions: defaultInteractions(),
  layers: [
    googleLayer
  ],
  target: 'map',
  view: new View({
    center: center,
    zoom: 12
  })
});

const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSMSource from 'ol/source/OSM.js';
import XYZSource from 'ol/source/XYZ.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';


const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const tmsLayer = new TileLayer({
  source: new XYZSource({
    url: 'http://v3.cartalib.mapgears.com/mapcache/tms/1.0.0/' +
        'mapgears_basemap@g/{z}/{x}/{-y}.'
  }),
  opacity: 1
});

const map = new Map({
  // use OL3-Google-Maps recommended default interactions