google maps: test lines

by Leo

HTML

<div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.21&libraries=geometry,places&callback=initMap" async defer></script>

CSS

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#map {
   height: 500px;
   width: 500px;
}

JavaScript

window.initMap = function initMap() {

    var styles = [{stylers: [{ lightness: 50 }]}];
    var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
    var mapTypeControlOptions = {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    };

    var center = new google.maps.LatLng(-33.8688, 151.2195);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 16,
        //mapTypeControlOptions: mapTypeControlOptions,
        mapTypeControl: false
    });https://jsfiddle.net/goleon/r8e3c1z6/#run
    
    var styleIndex = 0;
    setInterval(function(){
       styleIndex =  (styleIndex + 1) % mapTypeControlOptions.mapTypeIds.length;
       map.setMapTypeId(mapTypeControlOptions.mapTypeIds[styleIndex]);

    }, 3000);
    map.mapTypes.set('map_style', styledMap);

    var widths = [1, 1.5, 2, 2.5, 3];

    //rotated
   var lng1 = center.lng() - 0.004;
   var lng2 = center.lng() - 0.002;
   for(var i = 0; i < widths.length; i++)
   {
       drawPolyline(
          [
             {lat: center.lat() - 0.001, lng: lng1}, 
             {lat: center.lat() + 0.001, lng: lng2}
          ], 
          0, widths[i], 1.0, '#FF0000'
       );
       lng1 = lng1 + 0.001;
       lng2 = lng2 + 0.001;
   }
   
   //horizontal
   var lat =  center.lat() - 0.0015;
   for(var i = 0; i < widths.length; i++)
   {
   drawPolyline(
        [
           {lat: lat, lng: center.lng() - 0.002}, 
           {lat: lat, lng: center.lng()+ 0.002}
        ], 
        0, widths[i], 1.0, '#FF0000'
    );
      
      lat = lat - 0.0005;
   }
    
   //vertical
   var lng = center.lng() + 0.0025;
   for(var i = 0; i < widths.length; i++)
   {
      drawPolyline(
        [
           {lat: center.lat() + 0.001, lng: lng}, 
           {lat: center.lat() - 0.001, lng: lng}
        ], 
        0, widths[i], 1.0, '#FF0000'
      );
      
      lng = lng + 0.0007;
   }

   
    function drawPolyline(polylineCoords,...