how to update only the bookmarks and not the entire map? google maps v3

Question

how to update only the bookmarks and not the entire map? google maps v3

Navigation

#1 by (1 votes)

0

I just want to automatically update my bookmarks and when it picks up a new location in the database, it is updated only on the map .. but I have no idea how to do it. As I read it can be done with ajax

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(-25.415896, -54.616280),
            zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;


        downloadUrl('complemento_audio.php', function(data) {
            var xml = data.responseXML;
            var 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);
               // infowincontent.appendChild(document.createElement('br'));

               /* var text21 = document.createElement('text21');
                text21.textContent = direccion
                infowincontent.appendChild(text21);
                infowincontent.appendChild(document.createElement('br'));*/

                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 = "Denunciado por:    "
                infowincontent.appendChild(text3);
                //infowincontent.appendChild(document.createElement('br'));

                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";
              //  elem.type = ("video/mp4");
               // elem.setAttribute("align", "center");
               // elem.setAttribute("width", "1024");
                infowincontent.appendChild(elem);

               /* var enlace = document.createElement('a');
               // enlace.textContent = "      Mas info ...";
               // enlace.setAttribute("background", "red");
                enlace.href = "jasdhasjk.com";
                enlace.target = "_blank"; // para que se abra en una nueva pestaña
                infowincontent.appendChild(enlace);
                infowincontent.appendChild(document.createElement('br'));*/

                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() {}

my php code

<?php
require("module/dbase.php");

function parseToXML($htmlStr){
    $xmlStr=str_replace('<','&lt;',$htmlStr);
    $xmlStr=str_replace('>','&gt;',$xmlStr);
    $xmlStr=str_replace('"','&quot;',$xmlStr);
    $xmlStr=str_replace("'",'&#39;',$xmlStr);
    $xmlStr=str_replace("&",'&amp;',$xmlStr);
    return $xmlStr;
}

// Select all the rows in the markers table
$result_markers = "SELECT u.nombre, u.apellido, u.cedula, u.numero, u.nacimiento, a.direccion, a.latitud, a.longitud, a.horario FROM usu_panico u, audio_panico a WHERE u.cedula = a.identificador";
$resultado_markers = mysqli_query($mysqli, $result_markers);

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row_markers = mysqli_fetch_assoc($resultado_markers)){
  // Add to XML document node
  echo '<marker ';
  echo 'nombre="' . parseToXML($row_markers['nombre']) . '" ';
  echo 'apellido="' . parseToXML($row_markers['apellido']) . '" ';
  echo 'cedula="' . parseToXML($row_markers['cedula']) . '" ';
  echo 'numero="' . parseToXML($row_markers['numero']) . '" ';
  echo 'nacimiento="' . parseToXML($row_markers['nacimiento']) . '" ';
 // echo 'direccion="' . parseToXML($row_markers['avenida']) . '" ';
  echo 'foto="' . parseToXML($row_markers['direccion']) . '" ';
  echo 'hor="' . parseToXML($row_markers['horario']) . '" ';
  echo 'lat="' . $row_markers['latitud'] . '" ';
  echo 'lng="' . $row_markers['longitud'] . '" ';
  echo 'tipo="' . $row_markers['denuncia'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

javascript ajax google-maps

asked by franmavazq 09.11.2017 в 11:22

source

1 answer

Assign an intent to each item of a spinner Threads to show counter JAVA SWING

score 1 · Accepted Answer

I do not see in what case you could change your array of markers, if in the backend you always make the same query. But suppose you call your function downloadUrl several times and get different results.

First, you should have a variable marker_array accessible from outside the functions.

Second, after traversing the XML and creating each marker, add it to marker_array

Third, before calling downloadUrl several existing markers

var marker_array=[];

function initMap() {
    ... codigo ...
    downloadUrl('complemento_audio.php', function(data) {
       var markers = xml.documentElement.getElementsByTagName('marker');
       Array.prototype.forEach.call(markers, function(markerElem) {
           ... más código ...
           var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon1,
                    draggable: true,
           });

           marker_array.push(marker) // AQUI LO METES EN EL ARRAY

       });

}

function downloadUrl(url, callback) {
    // Antes de pedir un nuevo XML, 
    // procedo a vaciar mis markers existentes
    while(marker_array.length) {
        var marker = marker_array.pop();
        marker.setMap(null);
    }
    ... código ...
}