Add marker to map on button click and limit marker to one

Question

I have an add marker button on the map. when I click on that and place the mouse on the map I have to do below things

1) my mouse icon should change from hand symbol to +

2) display direction and lat-long on mouse move. something like this

3) when I click on any place I should be able to add a marker to that place.

4) I should be able to add only one marker on button click

5) Once I add the marked I have to display that marker's lat-long values in my search text box

Here is my code :

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>

possible duplicate of [removing previous marker before adding new marker in google maps](https://stackoverflow.com/questions/36010693/removing-previous-marker-before-adding-new-marker-in-google-maps) — geocodezip, Aug 31 '18 at 17:39
Your question is too broad, it is a coding spec, not a specific question about a defined coding issue. Please review [ask] and the [help]. — geocodezip, Aug 31 '18 at 18:35

score 0 · Answer 1 · answered Sep 01 '18 at 11:25

you could check if you have already added a marker with a global var

and add listner for manage mousemove ..

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

Add marker to map on button click and limit marker to one

1 Answers1