web-dev-qa-db-ja.com

コンテンツ情報ウィンドウマップv3を変更する

情報ウィンドウのコンテンツであるDIV内に表示されるコンテンツを変更できるようにしようとしています。情報ウィンドウ内でコンテンツをHelloからYOに変更することができました。問題は、情報ウィンドウを閉じて再度開くと、更新されたコンテンツが元のコンテンツに戻ることです。以下は私のコードです：

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
      if (event.type == google.maps.drawing.OverlayType.MARKER) {
          //event.overlay.setTitle("Hello");
          var infowindow = new google.maps.InfoWindow({
              content: '<div id="content" onmouseover="updateContent()">Hello</div>',
              maxWidth: 10
          });
          google.maps.event.addListener(event.overlay, 'click', function() {
              infowindow.open(map, event.overlay);
          });
      }
  });

  function updateContent() {
      document.getElementById('content').innerHTML = "Yo";
  }

基本的に、デフォルトの情報ウィンドウを作成し、ユーザーがページにマークを配置した後に独自のテキストを入力できるようにしたいです...

javascriptmapsinfowindow
14
Tommy

setContentHTMLメソッドを使用してコンテンツを設定する必要があります

var infowindow ;
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay,'click',function()
        infowindow.open(map,event.overlay);
     });
}});

function updateContent(){
    infowindow.setContent("YO");
}
10
Ramesh Kotha

次のようにsetContent（）を使用する必要があったため、上記の受け入れられた回答が機能しないことがわかりました。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay, 'click', function () {
            infowindow.open(map, event.overlay);
        });
    }
});
function updateContent() {
    infowindow.setContent("Yo");
}
12
Bron Thulke

最善の方法は、HTML文字列を使用するのではなく、DOM要素を使用してインフォウィンドウのコンテンツを作成することです。したがって、置き換えます：

_new google.maps.InfoWindow({
        content: '<div id="content" onmouseover="updateContent()">Hello</div>'
    });
_

と：

_var domElement = document.createElement('div');
domElement.innerHTML = '<div id="content" onmouseover="updateContent()">Hello</div>';
new google.maps.InfoWindow({
        content: domElement
    });
_

これで、document.getElementById("content");を使用してdivに簡単にアクセスし、必要なすべてのDOM操作を実行できます。

0
Lisa