Delete bookmarks and update them, google maps V3

Question

Delete bookmarks and update them, google maps V3

Navigation

#1 by (1 votes)

0

I need to remove the markers, or clean them off the map so that the old markers do not overlap. what this code does with the help of the setInterval(refreshMarker, 2000); is that it calls back the markers, and there if I am also stretching the new markers that originate from the database where I am capturing the data to show them on the map , but I have a problem. When you call this function again, refreshMarker() does not delete the old markers and they are superimposed, that makes thousands of markers copied on top of each other. I require a function that eliminates the markers so that the setInterval(refreshMarker, 2000); can work well and that my map is not filled with imitated markers ...

 <script>
    var map;
        var markers = [];
                function initMap() {
                     map = new google.maps.Map(document.getElementById('map'), {
                        center: new google.maps.LatLng(0, 0),
                        zoom: 12
                    });
                    var infoWindow = new google.maps.InfoWindow;
                    refreshMarker();

                    function refreshMarker(){

                    downloadUrl('complement.php', function(data) {
                        var xml = data.responseXML;
                       markers = xml.documentElement.getElementsByTagName('marker');
                        Array.prototype.forEach.call(markers, function(markerElem) {
                            var nombre = markerElem.getAttribute('nombre');
                            var apellido = markerElem.getAttribute('apellido');
                            var cedula = markerElem.getAttribute('cedula');
                            var numero = markerElem.getAttribute('numero');
                            var nacimiento = markerElem.getAttribute('nacimiento');
                           // var direccion = markerElem.getAttribute('direccion');
                            var fecha = markerElem.getAttribute('hor');
                            var foto = markerElem.getAttribute('foto');
                            var tipo = markerElem.getAttribute('tipo');
                            var point = new google.maps.LatLng(
                                parseFloat(markerElem.getAttribute('lat')),
                                parseFloat(markerElem.getAttribute('lng')));
                            var infowincontent = document.createElement('div');
                            var strong = document.createElement('strong');
                            strong.textContent = tipo + " en: "
                            infowincontent.appendChild(strong);
          var text2 = document.createElement('strong');
                            text2.textContent = "Fecha y Hora:     "
                            infowincontent.appendChild(text2);

                            var text = document.createElement('text');
                            text.textContent = fecha
                            infowincontent.appendChild(text);
                            infowincontent.appendChild(document.createElement('br'));

                            var text3 = document.createElement('strong');
                            text3.textContent = "NAME:    "
                            infowincontent.appendChild(text3);
        var text22 = document.createElement('text22');
                            text22.textContent = nombre + " " + apellido
                            infowincontent.appendChild(text22);
                            infowincontent.appendChild(document.createElement('br'));

                            var text1 = document.createElement('strong');
                            text1.textContent = "C.I.:      "
                            infowincontent.appendChild(text1);

                            var text11 = document.createElement('text11');
                            text11.textContent = cedula
                            infowincontent.appendChild(text11);
                            infowincontent.appendChild(document.createElement('br'));

                            var celular = document.createElement('strong');
                            celular.textContent = "Celular:      "
                            infowincontent.appendChild(celular);

                            var cel_num = document.createElement('cel_num');
                            cel_num.textContent = numero
                            infowincontent.appendChild(cel_num);
                            infowincontent.appendChild(document.createElement('br'));
                            infowincontent.appendChild(document.createElement('br'));

                            var elem = document.createElement('audio');
                            elem.src = foto
                            elem.controls = "true";
          infowincontent.appendChild(elem); 
        var icon1 = 'img_web/icono_asdasdasdasdasdasd.gif';
                            var marker = new google.maps.Marker({
                                map: map,
                                position: point,
                                icon: icon1,
                                draggable: true,
                               // animation: google.maps.Animation.DROP
                            });
                           // marker.setAnimation(google.maps.Animation.BOUNCE);
                            marker.addListener('click', function() {
                                infoWindow.setContent(infowincontent);
                                infoWindow.open(map, marker);
                            });
                        });

                    });

                  }


                }
                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, request.status);
                        }
                    };

                    request.open('GET', url, true);
                    request.send(null);
                }

                function doNothing() {}


setInterval(refreshMarker, 2000);

    </script>
    <body>
    <div id="map"></div>
    </body>

javascript google-maps-v3

asked by franmavazq 20.11.2017 в 13:49

source

1 answer

Call an SP from another SP ORACLE How to change the context when declaring a variable? [duplicate]

score 1 · Accepted Answer

The first thing I notice is that you never have the markers created in any variable, for this I recommend that the variable

var markers = [];

Leave it for that purpose, to save the created markers. the second thing would be to erase the existing markers each time you get a response from the server and finally use a local scope variable for the xml response

function refreshMarker(){
     downloadUrl('complement.php', function(data) {
         // (2) borrar los marcadores existentes
         deleteMarkers();
         var xml = data.responseXML;
         // (3) aqui hago cambio
         let markersXml = xml.documentElement.getElementsByTagName('marker');
         //cambio esto también
         Array.prototype.forEach.call(markersXml, function(markerElem) {
            // Omito tu lógica de extracción de datos ...

            //creas tu objeto LatLng
            var point = new google.maps.LatLng(
                        parseFloat(markerElem.getAttribute('lat')),    
                        parseFloat(markerElem.getAttribute('lng')));
            //creas tu marcador
            var marker = new google.maps.Marker({
                map : map,
                position : point,
                icon : icon1,
                draggable : true,
            });

            //agregas tu listener
            marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
            });

            //agregar nuestro marcador a la variable principal
            markers.push(marker)
        });
}

function setMapOnAll(map) {
    //hace ciclo sobre los marcadores que hemos guardado en la variable markers
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
}

function deleteMarkers() {
    setMapOnAll(null);
    markers = [];
  }

I'll leave this so you can have first-hand information.

Edit

To clarify, when you create a marker of the form:

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

if you look well, in map:map is saying that the map for that marker is the variable map, which is initialized in initMap() and therefore shows the marker on the map, and if you want to stop showing the marker just have to take the marker and say:

marker.setMap(null);

I leave the official definition of the class Marker

And as for the function deleteMarkers() what it does is:

function deleteMarkers(){
   // 1 dejar de mostrar los marcadores
   setMapOnAll(null);
   //2 eliminar toda referencia a los marcadores antiguos
   markers = [];

}

Successes.