JSFiddle - React, Tailwind, and code Playground

калькулятор направления

by Denis Tverdokhlebov

HTML

<script src="https://raw.githubusercontent.com/erunyon/ELabel/master/elabel.js"></script>
<!-- Блок ввода данных -->
<div id="form_map" class="form">
  <p>Пункт отправления</p>
  <input type="text" id="adress_1">

  <p>Пункт прибытия</p>
  <input type="text" id="adress_2">

  <div id="search_1">Проложить путь</div>
  <div class="clear"></div>
</div>


<!-- Блок с картой -->
<div id="map"></div>
<!-- Заменить ключ API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>












<!-- список полезных ссылок:
1.включение и отключение наложения своего изображения на карте: 

https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/overlay-remove?hl=ru

2. Анимация пути от точки А в точку Б:

https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/overlay-symbol-animate?hl=ru

3. Все демки карт:

https://developers.google.com/maps/documentation/javascript/examples/?hl=ru

4. Определить текущее местоположение через Google Maps API + HTML 5 Geolocation

https://ziscod.com/tekushhee-mestopolozhenie-google-maps-api-html-5-geolocation/
 -->

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 90%;
}

#form_map {
  height: 10%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

input {
  display: block;
  margin: 10px;
}

.clear {
  clear: both;
}

#adress_2,
#adress_1,
#search_1 {
  float: left;
}

#search_1 {
  margin: 10px;
  background-color: cornflowerblue;
  padding: 1px 10px;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
}

.form p {
  float: left;
  margin: 10px;
}




.label {
  font-size: 9px;
  text-align: center;
  color: #222;
  text-shadow: 0 0 5px #fff;
  font-family: Helvetica, Arial, sans-serif;
}

JavaScript

/***
 * Блок конвертации адреса в координаты - начало
 ***/

var Mapss = function geoadres(adress) {
  var resultlat = '';
  var resultlng = '';
  $.ajax({
    async: false,
    dataType: "json",
    url: 'http://maps.google.com/maps/api/geocode/json?address=' + adress,
    success: function(data) {
      for (var key in data.results) {
        resultlat = data.results[key].geometry.location.lat;
        resultlng = data.results[key].geometry.location.lng;
      }
    }
  });
  return {
    lat: resultlat,
    lng: resultlng
  }
}


/***
 * стартовая позиция и прорисовка карты
 ***/

function initMap() {
  navigator.geolocation.getCurrentPosition(
    function(position) { // все в порядке
      console.log(position);
    },
    function() { // ошибка
    }
  );

  /* Координаты цетра карты */
  var center = {
    lat: 55.756827,
    lng: 37.611688
  }

  /* Генерация карты */
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: center,
    mapTypeId: 'terrain',
    disableDefaultUI: true,
    zoomControl: true
  });




  var ELabel = ({
    latlng: new google.maps.LatLng(55.756827, 39.611688),
    label: 'Foo',
    classname: 'labelclass',
    offset: 0,
    opacity: 100,
    overlap: true,
    clicktarget: false
  });


  var label = new ELabel(new google.maps.LatLng(55.756827, 39.611688), "My Custom Label", "label");
  label.setMap(map);



}


function go_map() {

  /***
   * Определение магнитного склонения земли
   * ссылка на калькулятор https://www.ngdc.noaa.gov/geomag/calculators/magcalc.shtml#declination
   * ссылка на api https://www.ngdc.noaa.gov/geomag/help/declinationHelp.html
   ***/

  declination = 0;

  function setdecl(v) {
    alert("delination found: " + v);
    declination = v;
  }
  /* функция отправки запроса на расчет */
  function lookupMag(lat, lon) {
    var url =
      "https://www.ngdc.noaa.gov/geomag-web/calculators/calculateIgrfgrid?lat1=" + lat + "&lat2=" + lat + "&lon1=" + lon + "&lon2=" +...