title: google map - how to change google map infoWindow text
body: <p>I want to retrieve and display updated infoWindow content at the time user click on marker. Problem I am having is how to insert new text on the relevant click event.
  <img src="https://i.stack.imgur.com/twlKA.png" alt="enter image description here"></p>
  
  <p>Here is relevant code.</p>
  
  <pre><code>// add listener on InfoWindow - close last infoWindow  before opening new one 
  google.maps.event.addListener(marker, 'click', function() {
  
      //Close active window if exists - [one might expect this to be default behaviour no?]               
      if(activeInfoWindow != null) activeInfoWindow.close();
  
      // get latest text
      var newText = fnGetNewTextForInfoWindow();
  
      // this is clearly wrong  
      infoWnd.setContent(newText);
  
      // Open InfoWindow
      infoWnd.open(map, marker, newText);
  
      // Store new open InfoWindow in global variable
      activeInfoWindow = infoWnd;
  });                             
  </code></pre>
  
  <p>and full simplified example...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;style&gt;
  #map-canvas, #side-bar {        
      height: 500px;
      width: 600px;        
  }
  
  /* fix for unwanted scroll bar in InfoWindow */
  .scrollFix {
      line-height: 1.35;
      overflow: hidden;
      white-space: nowrap;
  }
  
  &lt;/style&gt;
  &lt;script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"&gt;&lt;/script&gt;           
  &lt;script src="../jquery/jquery.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  
  //  "use strict";
  
      // variable to hold a map
      var map;
  
      // variable to hold current active InfoWindow
      var activeInfoWindow ;      
  
      // ------------------------------------------------------------------------------- //
      // initialize function      
      // ------------------------------------------------------------------------------- //
        function initialize() {
  
          // map options - lots of options available here 
          var mapOptions = {
            zoom : 10,
            draggable: true,
            center : new google.maps.LatLng(44.9600, -93.1000),
            mapTypeId : google.maps.MapTypeId.ROADMAP
          };
  
          // create map in div called map-canvas using map options defined above
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
          // define two Google Map LatLng objects representing geographic points
          var stPaul          = new google.maps.LatLng(44.9522,-93.0892);
          var minneapolis     = new google.maps.LatLng(44.9792,-93.2662);
  
          // place two markers
          fnPlaceMarkers(stPaul,"St Paul");
          fnPlaceMarkers(minneapolis,"Minneapolis");          
        }
  
      // ------------------------------------------------------------------------------- //
      // create markers on the map
      // ------------------------------------------------------------------------------- //
      function fnPlaceMarkers(myLocation,myCityName){
  
          var marker = new google.maps.Marker({
              position : myLocation
          });
  
          // Renders the marker on the specified map
          marker.setMap(map); 
  
          // create an InfoWindow
          var infoWnd = new google.maps.InfoWindow();         
  
          // add content to your InfoWindow
          infoWnd.setContent('&lt;div class="scrollFix"&gt;' + 'Welcome to ' +  myCityName + '&lt;/div&gt;');
  
  // add listener on InfoWindow - close last infoWindow  before opening new one 
  google.maps.event.addListener(marker, 'click', function() {
  
  //Close active window if exists - [one might expect this to be default behaviour no?]               
  if(activeInfoWindow != null) activeInfoWindow.close();
  
  // get latest text
  var newText = fnGetNewTextForInfoWindow();
  infoWnd.setContent(newText);
  
  // Open InfoWindow
  infoWnd.open(map, marker, newText);
  
  // Store new open InfoWindow in global variable
  activeInfoWindow = infoWnd;
  });                             
      }
  
  
      function fnGetNewTextForInfoWindow(){
          var newText = $('#idSomeNewText');
          return newText;
      }
  
      // ------------------------------------------------------------------------------- //
      // initial load
      // ------------------------------------------------------------------------------- //       
      google.maps.event.addDomListener(window, 'load', initialize);
  
  
  &lt;/script&gt;
  &lt;a href="../index.php"&gt;BACK&lt;/a&gt;&lt;br&gt; 
  &lt;br/&gt;
  
  &lt;h3&gt;&lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;Enter some text in text box and click market to update text in InfoWindow, then show InfoWindow&lt;/li&gt;        
  &lt;/ul&gt;
  
  Enter Some text to insert in marker:
      &lt;input id='idSomeNewText' type="text" name="firstname" value="test value"&gt;  
  &lt;br/&gt;  &lt;br/&gt;  
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  
  &lt;br/&gt;
  &lt;br/&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>