Как я могу написать функцию, которая будет загружать данные в карту Google и, нажав на значок карты, выполнит еще одну задачу?

Question

Как я могу написать функцию, которая будет считывать широту и долготу из API и загружать их в карту Google, а когда я нажимаю значок карты Google, она вызывает другую функцию и отображает картинку / скриншот (из API)?Я генерирую список, вызывая API, используя json и GraphQl, но когда карта инициализируется, мне нужно написать функцию, которая загрузит их в карту, и когда я щелкну по ним, она вызовет функцию снимка экрана и отобразит картинку /скриншот из моих данных API.

  let data = {
    "query": "{ submitContactForm(name: \"" + name + "\", phone: \"" + phone + "\", content: \"" + content + "\"){result}} "
  };

  $.ajax({
    type: "POST",
    url: "**********",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(data),
    success: function (response) {
      alert('Congratulations! Your message has benn send');
    },
    error: function (response) {
      alert('Message sending failed');
    }
  })
}




$(document).ready(function () {
  //token refresh
  getLoginToken(function () {
    loadCameraList();

  });
  //load list
  // loadCameraList();
});

var loginKey = "";

function getLoginToken(callback) {
  //login and get token
  let dataString = {
    "query": "{login(emailOrPhone:\"******\", password: \"******\"){loginKey}}"
  };

  $.ajax({
    type: "POST",
    url: "******",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(dataString),
    // data:dataString,
    success: function (response, status) {
      // localStorage.setItem("token",response.data.login.loginKey);
      loginKey = response.data.login.loginKey;
      // console.log(loginKey);
      callback();
      // loadCameraList();

    }
  });

}

function loadCameraList() {
  // console.log(loginKey);
  let dataString = {
    "query": "{camerasByUser(userId: 1, token: \"" + loginKey + "\", isPublic: true){id name lat lon address isPublic groups{id name } }}"
  };

  $.ajax({
    type: "POST",
    url: "******************",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(dataString),
    success: function (response) {
      cameraList = response.data.camerasByUser;
      console.log(cameraList);
      cameraList.map(function (camera) {
        $('#cameraList').append(createCameraListItem(camera));
      });
      makeLiCollapsible();
      // useCameraList(cameraList);
      // console.log(cameraList);
    }
  });
}

function createCameraListItem(camera){
  let li = '' +
    '<li style="margin:5px 0px">'+
    '<div>'+
    '<button class="collapsible camera" data-id="'+camera.id+'" data-lat="'+camera.lat+'" data-lon="'+camera.lon+'" data-name="'+camera.name+'"><img src="./img/icons/grey.png" /> &nbsp; '+ camera.name +'</button>'+
    '<div class="content text-left">'+
    '<p>'+'<i>' + camera.address +'</p>'+
    '</div>'+
    '</div>'+
    '</li>';
  return li;
}

function showMap(id, lat, lon, name) {
  $('#mapView').empty();
  initMap(lat, lon, name);

  showScreenShot(id);
}

function showScreenShot(id) {
  let query = {
    "query": "{ getScreenCaptures(token:  \"" + loginKey + "\" , cameraIds: [" + id + "]) { screenshots { url cameraId cameraTitle} } }"
  };


  $.ajax({
    type: "POST",
    url: "*******************",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(query),
    success: function (response) {
      response.data.getScreenCaptures.screenshots.map(function (camera) {

        $('#screenshot').empty();
        $('#screenshot').append('<p>'+'<i>'+ camera.address +'</p>'+'<img style="width:360px; height:226px" src="' + camera.url + '">');
        return camera;
      });
    }
  });
}

function initMap(lat, lng, name) {
  var myLatLng = {lat: lat, lng: lng};
  var map = new google.maps.Map(document.getElementById('mapView'), {
    zoom: 17,
    center: myLatLng
  });
  var image = './mapicon.png';

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

          <!-- camera list section  start-->
          <div class=" col-md-4  dhaka_padding">
            <div class="description">
                <ul class="list-unstyled " id="cameraList" >
               </ul>
            </div>
          </div>
        <!-- camera list section  end-->


        <!-- mapview section -->
        <div class="col-md-4" style="position: relative" id="mapbg">
          <div class="mapViewClass" id="mapView" > </div>

        </div>
    

          <div class=" col-md-4" >
             <div class="row dhaka_padding2">
                      <div style=" width:80%; height:100%">
               <div  id="screenshot" style=" margin-left: -.4rem;">

                 <img class="screenshot_img list-unstyled" src="">
               </div>
             </div>
                   <div class="row pt-5 pr-1">
                      <div class="col-md-5 ">
                         <p class="text-left d-text" >For more Download app
                         </p>
                      </div>

                      <div class="col-md-7 ">
                        <img  class="size_img d-video" src="img/icons/play.png" >

                     </div>
                   </div>
               </div>

             </div>

Answer 1

После того, как вы создадите маркер, прикрепите событие клика к маркеру, тогда вы можете почти все, что захотите, в функции клика.

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});
marker.addListener('click', function() {
  //Do anything you want in here
});