Обновите значок маркера Google Maps со слушателем

Question

Я написал некоторый код, используя API Google Maps. Когда пользователь щелкает в любом месте карты, он создает маркер в этом месте, и открывается информационное окно, позволяющее ему выбрать, является ли этот маркер типом «A» или типом «B». Мне бы хотелось, чтобы значок обновлялся, когда пользователь нажимает «Сохранить» в этом информационном окне.

HTML:

<div id="form">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type='text' id='name' /> </td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><input type='text' id='address' /> </td>
    </tr>
    <tr>
      <td>Type:</td>
      <td><select id='type'> +
                  <option value='A' SELECTED>A</option>
                  <option value='B'>B</option>
          </select> 
      </td>
    </tr>
    <tr>
      <td></td>
      <td><input type='button' value='Save' onclick='saveData()' /></td>
    </tr>
  </table>
</div>

Инициализация Javascript:

infowindow = new google.maps.InfoWindow({
  content: document.getElementById('form')
});

messagewindow = new google.maps.InfoWindow({
  content: document.getElementById('message')
});

google.maps.event.addListener(map, 'click', function(event) {
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });


  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    document.getElementById('form').style.display = "block";
  });
});

Но я не уверен, что поместить в мой метод saveData (), чтобы обновить значок, используемый для созданного маркера. Это возможно ??

function saveData() {
 marker.update.setIcon("../images/A.png);
}

Спасибо.

Answer 1

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

в глобальном масштабе:

var lastmarker;

в прослушивателе вашего клика:

google.maps.event.addListener(map, 'click', function(event) {
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    lastmarker = marker;
    document.getElementById('form').style.display = "block";
  });
  google.maps.event.trigger(marker,'click');
});

В вашей функции saveData:

function saveData() {
  if (lastmarker && lastmarker.getIcon) {
    var iconUrl = "https://www.google.com/mapfiles/marker"+$("#type").val()+".png";
    lastmarker.setIcon(iconUrl);
  }
}

Подтверждение концепции скрипки

фрагмент кода:

var lastmarker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow({
    content: document.getElementById('form')
  });

  messagewindow = new google.maps.InfoWindow({
    content: document.getElementById('message')
  });

  google.maps.event.addListener(map, 'click', function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
      lastmarker = marker;
      document.getElementById('form').style.display = "block";
    });
    google.maps.event.trigger(marker, 'click');
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function saveData() {
  if (lastmarker && lastmarker.getIcon) {
    var iconUrl = "https://www.google.com/mapfiles/marker" + $("#type").val() + ".png";
    lastmarker.setIcon(iconUrl);
  }
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#form {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="form">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type='text' id='name' /> </td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><input type='text' id='address' /> </td>
    </tr>
    <tr>
      <td>Type:</td>
      <td>
        <select id='type'>
          <option value='A' SELECTED>A</option>
          <option value='B'>B</option>
          <option value='C'>C</option>
          <option value='D'>D</option>
          <option value='E'>E</option>
        </select>
      </td>
    </tr>
    <tr>
      <td></td>
      <td><input type='button' value='Save' onclick='saveData()' /></td>
    </tr>
  </table>
</div>
<div id="map_canvas"></div>