result : Array
    <form action="#v_form" method="post" id="v_form">

        <label for="visitor_name"><h3>Hello there! What is your name?</h3></label>

        <input type="text" name="visitor_name" id="visitor_name" />

        <input type="submit" name="submit_form" value="submit" />

    </form>



    

   <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 300px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
   .hidden {
     display:none;
    }
    </style>

    
 
    <!-- JavaScript to show google map -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=AIzaSyAruUNyZQjZ_CtnSdvDxO1Ji3P4nW3AP2k&sensor=true"></script> 
        <script type="text/javascript"  src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
    <script type="text/javascript">
        var circle;
       var location1;
        var map;
        var bermudaTriangle;
      jQuery(document).ready(function($){
       initMap();
     }); 
      function initMap() {   
 // Google has tweaked their interface somewhat - this tells the api to use that new UI
                google.maps.visualRefresh = true;
                var Liverpool = new google.maps.LatLng(53.408841, -2.981397);

                // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
                var mapOptions = {
                    center: new google.maps.LatLng(51.333789, -0.267620),
                    zoom: 9,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // This makes the div with id "map_canvas" a google map
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



                var triangleCoords = [
              new google.maps.LatLng(25.774252, -80.190262),
              new google.maps.LatLng(18.466465, -66.118292),
              new google.maps.LatLng(32.321384, -64.75737)
                ];

                // Construct the polygon.
                bermudaTriangle = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    editable: true,
                    draggable: true
                });

                bermudaTriangle.setMap(map);
                var aoptions = {
                    componentRestrictions: { country: 'GB' }
                };
  var input = (document.getElementById('address1'));

                var autocomplete = new google.maps.places.Autocomplete(input, aoptions);

                autocomplete.bindTo('bounds', map);


                var marker = new google.maps.Marker({
                    map: map
                });

                google.maps.event.addListener(autocomplete, 'place_changed', function () {

                    marker.setVisible(false);
                    input.className = '';
                    var place = autocomplete.getPlace();
                    if (!place.geometry) {
                        // Inform the user that the place was not found and return.
                        input.className = 'notfound';
                        return;
                    }

                    // If the place has a geometry, then present it on a map.
                    if (place.geometry.viewport) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(17);  // Why 17? Because it looks good.
                    }
                    marker.setIcon(({
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(35, 35)
                    }));
                    marker.setPosition(place.geometry.location);
                    marker.setVisible(true);

                    var address = '';
                    if (place.address_components) {
                        address = [
                            (place.address_components[0] && place.address_components[0].short_name || ''),
                            (place.address_components[1] && place.address_components[1].short_name || ''),
                            (place.address_components[2] && place.address_components[2].short_name || '')
                        ].join(' ');
                    }
                   
                });
                // Sets a listener on a radio button to change the filter type on Places
                // Autocomplete.


               


                google.maps.event.addListener(bermudaTriangle, 'mousedown', function () {

                    showresult();
                });
       }
      
     google.maps.event.addDomListener(window, 'load', initMap);
function initial() {
                geocoder = new google.maps.Geocoder();
                address1 = document.getElementById("address1").value;

                if (geocoder) {
                    geocoder.geocode({ 'address': address1 }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            //location of first address (latitude + longitude)
                            location1 = results[0].geometry.location;
                           //alert(location1.lat());
                            showMap();
$('#plotName').removeClass('hidden');
                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });

                }

            }
     function showMap() {


                var triangleCoords = [
              new google.maps.LatLng(location1.lat(), location1.lng()),
               new google.maps.LatLng(location1.lat() + .01, location1.lng() + .01),
               new google.maps.LatLng(location1.lat() + .02, location1.lng() + .02)

                ];


                // Construct the polygon.
                bermudaTriangle = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    editable: true,
                    draggable: true
                });

                bermudaTriangle.setMap(map);

                var foo = document.getElementById("btnshowMap");

                foo.disabled = true;


            }
function showresult() {

                formdiv.style.visibility = "visible";
                var cs = "";
                var content = [];
                var vertices = bermudaTriangle.getPath();
                // Iterate over the vertices.
                //   cs =  vertices.getAt(0)  + vertices.getAt(1);
                var len = vertices.getLength();
                content = vertices.getArray();


                for (var i = 0; i < len; i++) {
                    cs += content[i] + "^";
                }


                // document.getElementById("Result").innerHTML = cs + "len=" + len + "content=" + content[0];

                //  document.getElementById("Area_Lat").text = cs;


                document.getElementById("Latlng").value = cs;

            }
    </script>
 
    <div id="panel" class="col-md-offset-4">
    <input id="address1"   class="controls" type="text" size="50"   placeholder="Enter a location" />
    <input type="button" value="Create Plot" id="btnshowMap" onclick="initial();"/>
    <input type="button" value="Save Plot" onclick="showresult();" />
    <br/><input class="controls hidden" type="text" size="50"   placeholder="Enter a Plot Name" id="plotName" />
</div>
 

   <div id="map_canvas" style="height:600px;">

        </div>