google maps: test lines

by jmarikle

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 center = new google.maps.LatLng(-33.8688, 151.2195);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 17
    });

    //polyline
    drawPolyline(
        [
           {lat: center.lat() - 0.001, lng: center.lng() - 0.002}, 
           {lat: center.lat() + 0.001, lng: center.lng()},
           {lat: center.lat() + 0.001, lng: center.lng() + 0.001},
           {lat: center.lat() - 0.001, lng: center.lng() - 0.001} 
        ], 
        2, 1, 1.0, '#FF0000'
    );

   /* drawPolyline(
        [
           {lat: center.lat() - 0.001, lng: center.lng() - 0.001}, 
           {lat: center.lat() + 0.001, lng: center.lng() + 0.001}
        ], 
        1, 1.4, 1.0, '#FF0000'
    ); */
    
       drawPolyline(
        [
           {lat: center.lat() - 0.001, lng: center.lng()}, 
           {lat: center.lat() + 0.001, lng: center.lng() + 0.002}
        ], 
        1, 2, 1.0, '#FF0000'
    );


    function drawPolyline(polylineCoords, polylineStyleIndex, polylineWidth, polylineOpacity, polylineColor)
    {
        var polylineStyles = ["solid", "dash-dash", "dash-dot",  "dot-dot"];
        var polylineStyle = polylineStyles[polylineStyleIndex];
        var dashArray;
        if(polylineStyle == "dash-dot")
        {
            dashArray =  [5, 4 + polylineWidth - 1, 1, 4 + polylineWidth - 1];
        }
        else if(polylineStyle == "dash-dash")
        {
            dashArray =  [7, 7 + polylineWidth - 1];
        }
        else if(polylineStyle == "dot-dot")
        {
            dashArray =  [1, 3 + polylineWidth - 1];
        }
        else //solid
        {
            dashArray =  [];
        }

        var opts = createPolylineOptions(polylineCoords, dashArray, polylineWidth, polylineOpacity, polylineColor);
        var polyline = new google.maps.Polyline(opts);
    }

    function createPattern(pattern/*array*/)
    {
        var symbol = {path: "", scale: 1};
...