オープンGoogleマップを更新Infowindow

Question

私は、バストラッカーのウェブサイトからjson情報を取得し、自分自身をGoogleマップでローリングしています。明らかにきれいではありません。 現在、情報ウィンドウが開いている間に情報ウィンドウを更新する方法を理解できません。私はいくつかの例を見つけましたが、私が望むものは何もうまくいかないようです。私はどうにかしてマーカーを更新して各「更新」のために移動させることができましたが、情報ウィンドウは私が望むことをしません。私はマーカーをクリックして、情報ウィンドウに車速を表示するようにしたいと思っています。ウィンドウが開いている間にjsonが更新/ダウンロードすると、マーカーが移動し、ウィンドウの内容も新しい速度で更新されます。それは、開いている情報ウィンドウを閉じずにコンテンツを更新することです。

ボーナス：目標は、runbuses（）関数をチェックボックスでオンとオフに切り替えることです。そのため、チェックが外されると、新しいjsonのダウンロードが停止されます。私はそれをどうやってするか考えていない。ハハ

とにかくこれは、少しJavaを学ぼうとしている間、とにかく面白かったです。 ありがとう！

function runbuses() { 
 
    setInterval(function() { 
 

 
    loadbus(map) 
 

 
    }, 5000); 
 
} 
 

 

 
function loadbus(map) { 
 

 
    //howardshuttle.com 
 

 
    $.ajax({ 
 
    url: "http://www.howardshuttle.com/Services/JSONPRelay.svc/GetMapVehiclePoints", 
 
    data: 'ApiKey=8882812681', 
 
    dataType: 'jsonp', 
 
    jsonp: 'method', 
 
    async: false, 
 
    cache: false, 
 
    success: function(obj) { 
 

 
     for (var i = 0; i < obj.length; i++) { 
 

 
     var image = { 
 
      url: setumicon(obj[i]['Heading']), 
 
      anchor: new google.maps.Point(20, 20), 
 
      scaledSize: new google.maps.Size(40, 40) 
 
     } 
 

 
     console.log(obj[i].Name); 
 

 
     //Do we have this marker already? 
 
     if (umbuses.hasOwnProperty(obj[i].Name)) { 
 
      umbuses[obj[i].Name].setPosition(new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude)); 
 
      umbuses[obj[i].Name].setIcon(image); 
 

 
\t // How do i update the info window that is open? 
 

 

 
      console.log(Math.round(obj[i]['GroundSpeed'])); 
 
      console.log('has prop'); 
 

 
     } else { 
 
      var hover = obj[i].Name; 
 
      console.log('new'); 
 
      var image = { 
 
      url: setumicon(obj[i].Heading), 
 
      anchor: new google.maps.Point(20, 20), 
 
      scaledSize: new google.maps.Size(40, 40) 
 
      } 
 

 
      marker = new google.maps.Marker({ 
 
      position: new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude), 
 
      map: map, 
 
      icon: image, 
 
      title: String(hover) 
 
      }); 
 

 

 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
      return function() { 
 

 
       if (activeInfoWindow != null) activeInfoWindow.close(); 
 

 
       uminfo.setContent("<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" + 
 
       "Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>"); 
 

 

 
       uminfo.open(map, marker); 
 
       activeInfoWindow = uminfo; 
 

 
      } 
 
      })(marker, i)); 
 

 

 
      umbuses[obj[i].Name] = marker; 
 
      console.log(umbuses); 
 

 
     } 
 

 
     } 
 

 

 
    }, 
 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
     alert("some error"); 
 
    } 
 

 
    }); 
 

 
}

Answer 1

開いている情報ウィンドウの内容を変更したい場合、あなたはどのようなIDを変更し、それを変更するにはHTMLのDOM操作を使用すること、それにHTML要素を与えます。情報ウィンドウが開いている場合

uminfo.setContent("<div id='infowin'><p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" + 
      "Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p></div>"); 

その後、この作業をする必要があります：

document.getElementById('infowin').innerHTML = "<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" + 
      "Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>"; 

コードスニペット：助けを

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter() 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: "<div id='infowin'>original content</div>" 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(evt) { 
 
    infowindow.open(map, marker); 
 
    }) 
 
    google.maps.event.trigger(marker, 'click'); 
 
    setInterval(function() { 
 
    marker.setPosition(google.maps.geometry.spherical.computeOffset(marker.getPosition(), 100, 90)); 
 
    document.getElementById('infowin').innerHTML = "<b>Time</b>:" + Date() + "<br>" + marker.getPosition().toUrlValue(6); 
 
    }, 5000); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>