JSFiddle - React, Tailwind, and code Playground

HTML

<title>Google Map demo</title>
<script src="https://googlewebcomponents.github.io/google-map/components/google-map/demo/../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://googlewebcomponents.github.io/google-map/components/google-map/demo/../google-map.html">
<link rel="import" href="https://googlewebcomponents.github.io/google-map/components/google-map/demo/../google-map-marker.html">
<link rel="import" href="https://googlewebcomponents.github.io/google-map/components/google-map/demo/../google-map-directions.html">

<google-map latitude="30.283" longitude="57.083" zoom="12" language="fa" additional-map-options='{ "zoomControl" : "true", "zoomControlOptions": {
    "style": "google.maps.ZoomControlStyle.SMALL", 
    "position": 9
  }}' disable-default-ui></google-map>

CSS

body {

        margin: 0;

        height: 100vh;

    }

    #controlsToggle {

        position: absolute;

        left: 10%;

        bottom: 10%;

    }

JavaScript

var gmap = document.querySelector('google-map');
gmap.addEventListener('api-load', function (e) {
    document.querySelector('google-map-directions').map = this.map;
});

function toggleControls() {
    gmap.disableDefaultUi = !gmap.disableDefaultUi;
}


console.log(google.maps.ControlPosition.BOTTOM_RIGHT)