Скрыть и показать маркеры в Google Maps API

мне нужна помощь. Я не очень хорошо разбираюсь в JS, вы можете дать мне решение? Мне нужно удалить этот маркер с помощью флажка или кнопки. Я пытаюсь найти решение в Интернете, но все еще не понимаю. Я надеюсь, что вы можете мне помочь, ребята, большое вам спасибо.

<script type = "text/javascript" src = "https://maps.google.com/maps/api/js?key=KEY"></script>

<script type = "text/javascript">
//MARKER DATA FROM DB
var locations = [@foreach($kegiatan as $kegiatan)['{{$kegiatan->tanggal}}',{{$kegiatan->lat}},{{$kegiatan->lng}},'{{$kegiatan->gambar}}','{{$kegiatan->nama_tatanan}}','{{$kegiatan->nama_program}}','{{$kegiatan->pelaksanaan}}','{{$kegiatan->nama_kecamatan}}','{{$kegiatan->nama_kelurahan}}','{{$kegiatan->nama_kegiatan}}','{{$kegiatan->nama_indikator}}'],@endforeach];

function initialize() {
  //PUT THE MAP INTO DIV
  var mapDiv = document.getElementById('googft-mapCanvas');
  //INIT MAP
  var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(-6.390487,106.818807),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  });

//GIVE LAYER
  layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
      select: "col17",
      from: "1kKFhr-EJ8uWfHlnV3o6Iqzdu-NGosuZr30Phs3HW",
      where: ""
  },
  options: {
      styleId: 2,
      templateId: 2
  }
  });

  //MAKE VAR MARKER, URL
  var marker, i, infowindow;
  var assetUrl = '{{asset("img/kegiatan/")}}'

  function setMapOnAll(){
    for(i=0; i<locations.length; i++){
  //CREATE MARKER
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: "{{asset('img/marker/marker.png')}}",
  });

  //CREATE INFOWINDOW
  infowindow = new google.maps.InfoWindow();
  //CLICK FUNCTION FOR INFOWINDOW
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent('<div class = "infowindow">'+ '<b> ' + locations[i][9] + '</b>' + '<p>' + locations[i][0] + '</p>' + '<img src = "' + assetUrl + '/' + locations[i][3] + '">' + '<br><br><div><b>Nama Tatanan : </b>' + locations[i][4] + '</div><br><div><b>Nama Indikator : </b>' + locations[i][10] +  '</div><br><div><b>Nama Program : </b>'+ locations[i][5] + '<br><br><div><b>Nama Pelaksana : </b>'+ locations[i][6] + '</div><br><div><b>Nama Kecamatan : </b>'+locations[i][7]+'</div><br><div><b>Nama Kelurahan : </b>'+locations[i][8]+'</div></div>');
      infowindow.open(map, marker);
    }
  })(marker, i));
}
  }
  setMapOnAll();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Результат будет таким

Как это выглядит

Из вашего вопроса неясно, какой маркер вы пытаетесь удалить. Можете ли вы уточнить, где находится флажок или кнопка, и определить, какой маркер вы пытаетесь удалить?

— 10.01.2019 01:05

@Daniel, я пытаюсь удалить маркер, мне решать, хотите ли вы использовать флажок или кнопку :(

— 10.01.2019 01:11

javascript html css google-maps-api-3

09.01.2019 23:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

217

Ответы 1

Я не понял вашего комментария, но вы можете использовать этот javascript для карт:

let map;
    map = new GMaps({
        el: '#map',
        center: new google.maps.LatLng(40.7127837, -74.0059413),
        zoom: 13,
        styles: [
            {
                "featureType":"water",
                "elementType":"geometry",
                "stylers":[{"color":"#e9e9e9"},{"lightness":17}]},
            {
                "featureType":"landscape",
                "elementType":"geometry",
                "stylers":[
                    {"color":"#f5f5f5"},
                    {"lightness":20}]},
            {
                "featureType":"road.highway",
                "elementType":"geometry.fill",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":17}]},
            {"featureType":"road.highway",
                "elementType":"geometry.stroke",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":29},{"weight":0.2}]},
            {"featureType":"road.arterial",
                "elementType":"geometry",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":18}]},
            {"featureType":"road.local",
                "elementType":"geometry",
                "stylers":[{"color":"#ffffff"},
                    {"lightness":16}]},
            {"featureType":"poi",
                "elementType":"geometry",
                "stylers":[{"color":"#f5f5f5"},
                    {"lightness":21}]},
            {"featureType":"poi.park",
                "elementType":"geometry",
                "stylers":[{"color":"#dedede"},
                    {"lightness":21}]},     {"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},     {"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
    });
    let map_icon = 'assets/images/map-marker.png';
    map.addMarker({
        position: {lat: 40.7127837, lng: -74.0059413},
        lat: 40.7127837,
        lng: -74.0059413,
        title: 'New York',
        icon: map_icon,
        animation: google.maps.Animation.BOUNCE,
        details: {
            database_id: 42,
            author: 'HPNeo'
        },
        click: function(e){
            if (console.info)
                console.info(e);
            alert('You clicked in this marker');
        },
        mouseover: function(e){
            if (console.info)
                console.info(e);
        }
    });
 </pre>

Я надеюсь, что это помогает

10.01.2019 04:04