Search code examples
javascriptmapsinfowindow

change content infowindow maps v3


I am trying to make it possible to change the content that shows up inside a DIV that is the content of an infowindow. I have been able to change the content from Hello to YO inside the infowindow. The problem is when I close the infowindow and reopen it the updated content reverts back to the original. Below is my code:

  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";
  }

I basically want to create a default info window and allow the user to input their own text after they place the marke on the page...


Solution

  • you have to set the content through setContentHTML method

    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");
    }