title: Angular 4 google map Full Control and Zoom Control positions and styling
body: <p>I am using AGM - Angular Google Maps for my angular 4 application. I have setting up the control options as the documents. But they are not working. My code is as follows.
  HTML</p>
  
  <pre><code>[latitude]="lat" 
  [longitude]="lng" 
  [zoom]="zoom" 
  [styles] = "styles"
  [disableDefaultUI]="true"
  [zoomControl]="true"
  [scaleControl]="true"
  [scaleControlOptions]="scaleControlOptions"
  [zoomControlOptions]="zoomControlOptions"
  [fullscreenControl]="true"
  [fullscreenControlOptions]="fullscreenControlOptions"
  [streetViewControl]="'false'"
  [mapTypeControl]="'true'"
  [mapTypeControlOptions]="mapTypeControlOptions"
  </code></pre>
  
  <p>Properties on the Ts</p>
  
  <pre><code>lat = 40;
  lng = 40;
  zoom = 2;
  
  zoomControlOptions: ZoomControlOptions = {
      position: ControlPosition.LEFT_BOTTOM,
      style: ZoomControlStyle.LARGE
    };
  
   fullscreenControlOptions: FullscreenControlOptions = {
      position : ControlPosition.LEFT_BOTTOM
    };
  
    mapTypeControlOptions: MapTypeControlOptions = {
      mapTypeIds: [ MapTypeId.ROADMAP],
      position: ControlPosition.BOTTOM_LEFT,
    };
  </code></pre>
  
  <p>Styles json copied from <a href="https://mapstyle.withgoogle.com/" rel="nofollow noreferrer">https://mapstyle.withgoogle.com/</a>. 
  I need to have Full control and zoom control left down corner as follows with the custom styles.. </p>
  
  <p><a href="https://i.stack.imgur.com/E1x2B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E1x2B.png" alt="enter image description here"></a></p>