title: Input Latitude and Longitude to plot polygon from textarea
body: <p>I'm trying to make a javascript function where you have to input coordinates of 3 point minimum and them you see it (plotted) on a google map. The script has some problems.</p>
  
  <p>It doesn't print space between coords and doesn't plot the area on the map.</p>
  
  <p>Here is HTML code which I think doesn't have any problem.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Plot area&lt;/title&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;br&gt;
  &lt;div id="panel"&gt;
    &lt;textarea id="lat" type="text"&gt;&lt;/textarea&gt;
      &lt;br&gt;
        &lt;input type="button" value="Plot area" onclick="codeLatLng()"&gt;
      &lt;/div&gt;
    &lt;br&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is JS code where I think the problem is located.</p>
  
  <pre><code>var map;
  var infoWindow;
  
  function initialize() {
    var mapOptions = {
      zoom: 5,
      center: new google.maps.LatLng(24.886436412, -70.2685546875),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
  
    var bermudaTriangle;
  
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  
    // Define the LatLng coordinates for the polygon.
    var triangleCoords = latlng;
  
    // Construct the polygon.
    bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
  
    bermudaTriangle.setMap(map);
  
    // Add a listener for the click event.
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
  
    infoWindow = new google.maps.InfoWindow();
  }
  
  //plot area
  function codeLatLng() {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(11);
          marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
        } else {
          alert('No results found');
        }
      } else {
        alert('Geocoder failed due to: ' + status);
      }
    });
  }
  
  /** @this {google.maps.Polygon} */
  function showArrays(event) {
  
    // Since this polygon has only one path, we can call getPath()
    // to return the MVCArray of LatLngs.
    var vertices = this.getPath();
  
    var contentString = '&lt;b&gt;Bermuda Triangle polygon&lt;/b&gt;&lt;br&gt;' +
        'Clicked location: &lt;br&gt;' + event.latLng.lat() + ',' + event.latLng.lng() +
        '&lt;br&gt;';
  
    // Iterate over the vertices.
    for (var i =0; i &lt; vertices.getLength(); i++) {
      var xy = vertices.getAt(i);
      contentString += '&lt;br&gt;' + 'Coordinate ' + i + ':&lt;br&gt;' + xy.lat() + ',' +
          xy.lng();
    }
  
    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);
  
    infoWindow.open(map);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>Thank you in advance.</p>