Can not make polygon using google maps api with GPS coordinates loaded from text field

Question

I am working on interactive map, using google maps api. The map has a floating panel with two text fields in which I am writing GPS coordinates.

Then I have to make a marker and make a polygon from these markers. I can make a simple line from last marker to previous marker, but I do not kno, how to make the polygon.

Here is my code:

HTML

<div id="floating-panel">
  <input id="lat" type="text" value="">
  <input id="lng" type="text" value="">
  <input id="submit" type="button" value="Vložit">
</div>
<div id="map"></div>

CSS

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

JS

  var poly;
  var map;
  var myPolygon;
  var path = [];

  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.190}
    ];

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: new google.maps.LatLng(49.8037633, 15.4749126),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    });

    poly = new google.maps.Polyline({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2
    });
    poly.setMap(map);

    var lengthPolyg = path.length;
    if(lengthPolyg > 2){
    myPolygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    }
    myPolygon.setMap(map);
    //console.log(triangleCoords);

    document.getElementById('submit').addEventListener('click', function() {
    addLatLng();
    });
  }

  function addLatLng() {

    var inputLat = document.getElementById('lat').value;
    var inputLng = document.getElementById('lng').value;
    path = poly.getPath();

    var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));

    path.push(curPosition);

    var marker = new google.maps.Marker({
      position: {lat: parseFloat(inputLat), lng: parseFloat(inputLng)},
      //title: '#' + path.getLength(),
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2P1rNcUTs9V_tOGPG6aOP0Wp6Xn-P6kc&callback=initMap">

geocodezip · Answer 1 · 2019-10-15T16:45:03.537

You are creating a Polyline, not a Polygon (you only create the Polygon in the initMap routine if the Polyline's path is greater than 2, which it never is at that point in your code). Move the creation of the Polygon into the addLatLng function:

function addLatLng() {
  var inputLat = document.getElementById('lat').value;
  var inputLng = document.getElementById('lng').value;
  path = poly.getPath();

  var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));

  path.push(curPosition);
  var lengthPolyg = path.length;
  if (!myPolygon && lengthPolyg > 2) {
    myPolygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    myPolygon.setMap(map);
  }
  if (!!myPolygon && myPolygon.setPath) myPolygon.setPath(path);

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(inputLat),
      lng: parseFloat(inputLng)
    },
    map: map
  });
}

proof of concept fiddle

code snippet:

var poly;
var map;
var myPolygon;
var path = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(49.8037633, 15.4749126),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  });
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('lat').value = evt.latLng.lat();
    document.getElementById('lng').value = evt.latLng.lng();
  })
  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2
  });
  document.getElementById('submit').addEventListener('click', function() {
    addLatLng();
  });
}

function addLatLng() {
  var inputLat = document.getElementById('lat').value;
  var inputLng = document.getElementById('lng').value;
  console.log(inputLat + "," + inputLng);
  path = poly.getPath();

  var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));

  path.push(curPosition);
  var lengthPolyg = path.length;
  console.log(lengthPolyg);
  if (!myPolygon && lengthPolyg > 2) {
    console.log("create myPolygon " + path.length);
    myPolygon = new google.maps.Polygon({
      paths: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    myPolygon.setMap(map);
  }
  if (!!myPolygon && myPolygon.setPath) myPolygon.setPath(path);

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(inputLat),
      lng: parseFloat(inputLng)
    },
    map: map
  });
}

#map {
  height: 80%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="floating-panel">
  <input id="lat" type="text" value="">
  <input id="lng" type="text" value="">
  <input id="submit" type="button" value="Vložit">
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

Are you using `if (!!myPolygon)` and not `if (myPolygon)` for any reason? — Toni Michel Caubet, Oct 15 '19 at 16:41
personal preference. [What is the !! (not not) operator in JavaScript?](https://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript) — geocodezip, Oct 15 '19 at 16:45

Can not make polygon using google maps api with GPS coordinates loaded from text field

1 Answers1