google map api ajax маркеры перезагрузки

Question

Мне нужна карта Google для перезагрузки маркеров без перезагрузки всей карты ... для целей отслеживания .... а также для отображения / скрытия трафика без повторной загрузки карты ... например.каждые 15 секунд перезагружайте маркеры, чтобы они обновляли позиции ...

вот мой код

 function loadmap2(i) {
  var map = new google.maps.Map(document.getElementById("map2"), {
    center: new google.maps.LatLng(40.742575,-73.874932),  //40.671037,-73.991976   40.710313,-73.858452
    zoom: 11,
    mapTypeId: 'roadmap'
  });

if (i == 'traffic') {traffic();} else {};

function traffic() {
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
  var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  downloadUrl("markers_trucks_xml.cfm?date=<cfoutput>#URL.date#</cfoutput>", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var id = markers[i].getAttribute("id");
var icon = markers[i].getAttribute("icon");//icon
    var color = markers[i].getAttribute("color");//color
var type = markers[i].getAttribute("type");
var data1 = markers[i].getAttribute("data1");
    var data2 = markers[i].getAttribute("data2");
    var data3 = markers[i].getAttribute("data3");
    var data4 = markers[i].getAttribute("data4");
    var data5 = markers[i].getAttribute("data5");
    var data6 = markers[i].getAttribute("data6");
    var data7 = markers[i].getAttribute("data7");
    var data8 = markers[i].getAttribute("data8");
    var data9 = markers[i].getAttribute("data9");
    var data10 = markers[i].getAttribute("data10");

    var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
var ind = i;
var ind= ind + 1;
if(type == 'truck')
{
var html = "<b><a href='da.cfm?id="+id+"'>"+data1+"</a></b><br />"+"Order # <b>"+data2+" &nbsp;&nbsp;"+data3+"</b> <i>lbs</i><br />" + "<br/><br/>" + data5 + "<br />" + data6 + "<br/>" + data7 + "<br/>" + data8 +"<br />"+ data9;
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|"+icon+"|"+color+"|000000";
}
else if(type == 'track')
{
var html = "<b><a href='da1.cfm?id="+id+"'>"+data1+"</a></b><br />"+"<b>"+data3+"</b>&nbsp;MPH&nbsp;-&nbsp;Engine&nbsp;<b>"+data7+"</b><br /><br/>Last Read&nbsp;" + data4 + "<br />Stop Duration&nbsp;" + data5 + "<br/>Recent Movement&nbsp;" + data6 + "<br/>Location&nbsp;" + data8 +"&nbsp;&nbsp;"+ data9;
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|"+icon+"|"+color+"|000000";
}

 var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
    title: data1,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    };


  });

};


function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    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() {}

// This function picks up the click and opens the corresponding info window
  function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
  }

Answer 1

Вам необходимо модулировать ваш код - есть функция для рисования вашей карты, функция для загрузки ваших данных, функция для первоначального рисования ваших маркеров (и заполнения вашего глобального массива маркеров) и функция для обновления позиции маркера.В конечном итоге вы хотите сохранить все ваши объекты маркеров в массиве.Позже вы используете ваш массив в качестве ссылки, когда вы хотите обновить позицию маркеров (вам не нужно очищать маркеры или повторно инициализировать карту)

    //your global marker array for storing marker objects
    var globalMarkers;

    function init() {
    //initialise your map

//draw the initial set of markers
drawMarkers();
    }
    function loadData() {
    //define return array
    var data = [];

    //load your data here
    //loop through data as you do 

    //store marker points
    data[i].point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

    //add other data if you wish

    //return a simple array of marker data - do not add them to the map yet
    return data;
    }

    function drawMarkers() {
    var markers = loadData();
    for (var i=0;i<markers.length;i++) {

     var marker = new google.maps.Marker({
            map: map,
            position: markers[i].point,
            icon: icon,
        title: data1,
            shadow: icon.shadow
          });
    }
    //save your marker in a global array for updating later
    globalMarkers.push(marker);
    }

    //this function updates position of markers with new data - you will be calling this one on a timer
    function updateMarkers() {
//load new data
data = loadData();
    //loop through array of marker objects and update their position with new data
    for (var i=0;i<globalMarkers.length;i++) {
    globalMarkers[i].setPosition(data[i].point);
    }

    }

порядок выполнения этого кода должен быть в документезагрузить init () карту и позже вызывать updateMarkers только по таймеру.