Simple Map

by Lawrence Ross

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>
<!-- 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>

CSS

#map {
  height: 80%;
}

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

JavaScript

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
  });
}