Добавить маркер на карту по нажатию кнопки и ограничить маркер до одного

Question

У меня есть кнопка добавления маркера на карте. когда я нажимаю на это и помещаю мышь на карту, я должен сделать следующее:

1) значок моей мыши должен измениться с символа руки на +

2) отображение направления и широты при перемещении мыши. как то так

3) когда я нажимаю на любое место, я могу добавить маркер в это место.

4) Я могу добавить только один маркер при нажатии кнопки

5) После того, как я добавлю отмеченное, я должен отобразить значения lat-long этого маркера в моем текстовом поле поиска

Вот мой код:

function myMap() {
  var myCenter = new google.maps.LatLng(56.1304, -106.3468);
  var mapProp = {
    center: myCenter,
    zoom: 6,
    scrollwheel: true,
    draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);
  
   google.maps.event.addListener(map, 'click', function (event)     {
        placeMarker(event.latLng);
    });

    function placeMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            animation: google.maps.Animation.DROP,
            map: map
        });
    }
}

<div id="map" style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; "></div>
<div>
    <input id="searchtext" type="text" value=" " class="search-text" placeholder="Enter your search location here" style="z-index: 0; position: absolute; left: 125px; top: 0px;">
</div>


<div class="tool" id="addmarker" data-color='blue' style="z-index: 0; position: absolute; left: 0px; top: 289px;">
    <img id="addmarkerbutton" class="map-tool-icon" title="Add Marker" src="~/Images/search.png" alt="Add Marker">
</div>

Answer 1

вы можете проверить, если вы уже добавили маркер с глобальной переменной

и добавить список для управления мышью.

var markerAdded =  0;

var text = document.getElementById('searchtext');

function myMap() {
  var myCenter = new google.maps.LatLng(56.1304, -106.3468);
  var mapProp = {
    center: myCenter,
    zoom: 6,
    scrollwheel: true,
    draggable: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);

   google.maps.event.addListener(map, 'click', function (event)     {
      if (markerAdded == 0 ){
        placeMarker(event.latLng);
        markerAdded = 1;
      }
    });

  google.maps.event.addListener(map, 'mousemove', function (event) {    
         text.value = location.lat() + ' ' + location.lng(); 
  }

    function placeMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            animation: google.maps.Animation.DROP,
            map: map
        });

     text.value = location.lat() + ' ' + location.lng(); 
    }
}