Google maps Установка только одного маркера

109

05 января 2020, 03:50

Прошу помощи так как абсолютно не понимаю в javascript.

При клике на карту, появляется маркер , и появляется табличка для заполнения. Если выбрать другое место , предыдущий маркер остается видимым на карте, а хотелось бы убрать.

Заранее благодарен .

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<title>API Google Maps v3 добавление меток пользователями и вывод их по категориям</title>  
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBNm_E5s9GF0ISJ5vAJIfrx_1s3WboNu_8&sensor=false"></script>  
  
<script src="/mapa/jquery.min.js" type="text/javascript"></script> 
  
<script type="text/javascript">  
 
  function initialize() { 
    var myLatlng = new google.maps.LatLng(47.910511,33.391734); 
    var myOptions = { 
      zoom: 15, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  
     var html = "<table>" + 
                         "<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" + 
                         "<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" + 
                         "<tr><td>Тип:</td> <td><select id='type'>" + 
                         "<option value='bar' SELECTED>Бар</option>" + 
                         "<option value='restaurant'>Ресторан</option>" + 
                         "<option value='cafe'>Кафе</option>" + 
                         "</select> </td></tr>" + 
                         "<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>"; 
  
    infowindow = new google.maps.InfoWindow({ 
     content: html 
    }); 
  
    google.maps.event.addListener(map, "click", function(event) { 
        marker = new google.maps.Marker({ 
          position: event.latLng, 
          map: map 
        }); 
		 
        google.maps.event.addListener(map, "click", function() { 
          infowindow.open(map, marker); 
        }); 
    });	 
	 
	 
  } 
  
  
 
  function saveData() { 
      var name = escape(document.getElementById("name").value); 
      var address = escape(document.getElementById("address").value); 
      var type = document.getElementById("type").value; 
      var latlng = marker.getPosition(); 
  
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + 
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); 
      downloadUrl(url, function(data, responseCode) { 
        if (responseCode == 200 && data.length <= 1) { 
          infowindow.close(); 
          document.getElementById("message").innerHTML = "Данные добавлены."; 
        } 
      }); 
    } 
  
    function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
          new ActiveXObject('Microsoft.XMLHTTP') : 
          new XMLHttpRequest; 
  
      request.onreadystatechange = function() { 
        if (request.readyState == 4) { 
          request.onreadystatechange = doNothing; 
          callback(request.responseText, request.status); 
        } 
      }; 
  
      request.open('GET', url, true); 
      request.send(null); 
    } 
  
    function doNothing() {} 
</script>  
  
<style type="text/css" media="screen">  
#map_canvas { float:left; width:600px; height:400px; border:1px solid #000;}  
</style> 
  
</head>  
<body onload="initialize()">  
      <div id="map_canvas"></div>  
    <div id="message"></div> 
 
</body>  
</html>

Answer 1

Как убрать маркер с Google карт

Я добавил вот эти строчки:

// переменную для маркера необходимо объявить где 
// то в теле скрипта, но не в теле метода обработки клика
var marker; 
...
// при обработке клика если marker не undefined 
// удаляем его перед добавлением нового
marker && marker.setMap(null);

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<title>API Google Maps v3 добавление меток пользователями и вывод их по категориям</title>  
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBNm_E5s9GF0ISJ5vAJIfrx_1s3WboNu_8&sensor=false"></script>  
  
<script src="/mapa/jquery.min.js" type="text/javascript"></script> 
  
<script type="text/javascript">  
 
  function initialize() { 
  
    var myLatlng = new google.maps.LatLng(47.910511,33.391734); 
    var myOptions = { 
      zoom: 15, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  
     var html = "<table>" + 
                         "<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" + 
                         "<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" + 
                         "<tr><td>Тип:</td> <td><select id='type'>" + 
                         "<option value='bar' SELECTED>Бар</option>" + 
                         "<option value='restaurant'>Ресторан</option>" + 
                         "<option value='cafe'>Кафе</option>" + 
                         "</select> </td></tr>" + 
                         "<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>"; 
  
    infowindow = new google.maps.InfoWindow({ 
     content: html 
    }); 
  
    var marker; 
    google.maps.event.addListener(map, "click", function(event) { 
        marker && marker.setMap(null) 
        marker = new google.maps.Marker({ 
          position: event.latLng, 
          map: map 
        }); 
		 
        google.maps.event.addListener(map, "click", function() { 
          infowindow.open(map, marker); 
        }); 
    });	 
	 
	 
  } 
  
  
 
  function saveData() { 
      var name = escape(document.getElementById("name").value); 
      var address = escape(document.getElementById("address").value); 
      var type = document.getElementById("type").value; 
      var latlng = marker.getPosition(); 
  
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + 
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); 
      downloadUrl(url, function(data, responseCode) { 
        if (responseCode == 200 && data.length <= 1) { 
          infowindow.close(); 
          document.getElementById("message").innerHTML = "Данные добавлены."; 
        } 
      }); 
    } 
  
    function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
          new ActiveXObject('Microsoft.XMLHTTP') : 
          new XMLHttpRequest; 
  
      request.onreadystatechange = function() { 
        if (request.readyState == 4) { 
          request.onreadystatechange = doNothing; 
          callback(request.responseText, request.status); 
        } 
      }; 
  
      request.open('GET', url, true); 
      request.send(null); 
    } 
  
    function doNothing() {} 
</script>  
  
<style type="text/css" media="screen">  
#map_canvas { float:left; width:600px; height:400px; border:1px solid #000;}  
</style> 
  
</head>  
<body onload="initialize()">  
      <div id="map_canvas"></div>  
    <div id="message"></div> 
 
</body>  
</html>

PS: В скрипте падают еще какие-то ошибки, не стал разбираться с ними

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

fusionchart + vue через json

Здравствуйте юзаю fusionchart + vue для всяких диаграмм, возникла проблема при выводе данных через jsonформаты данных разные, но вывод данных со своей...

143

javascript