Update InfoWindow contents when marker is clicked

This is useful when content of infoWindow changes frequently

Enter Some text to insert in marker:

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Google Map with two Markers with InfoWindows - Update contents when marker is clicked</title>

#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;

<script src="" type="text/javascript"></script>           
<script src="../jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript">

//  "use strict";

    // variable to hold a map
    var map;

    // variable to hold current active InfoWindow
    var activeInfoWindow ;      

	// arrays to hold copies of the markers and html used by the side_bar		  
	var gmarkers = [];

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

    // ------------------------------------------------------------------------------- //
    // create markers on the map
    // ------------------------------------------------------------------------------- //
    function fnPlaceMarkers(myLocation,myCityName){

        var marker = new google.maps.Marker({
            position : myLocation

        // Renders the marker on the specified map

		// save the info we need to use later 
        // create an InfoWindow
        var infoWnd = new google.maps.InfoWindow();         

        // add content to your InfoWindow
        infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '</div>');

		// add listener on InfoWindow - close last infoWindow  before opening new one 
		google.maps.event.addListener(marker, 'click', function() {

		//Close previous active window if exists - [one might expect this to be default behaviour no?]               
		if(activeInfoWindow != null) activeInfoWindow.close();
		// get latest text
		var newText = fnGetNewTextForInfoWindow();
		// Update InfoWindow content

		 // Open InfoWindow, marker);
		// Store new open InfoWindow in global variable
			activeInfoWindow = infoWnd;

    function fnGetNewTextForInfoWindow(){
        var newText = $('#idSomeNewText').val();
        return newText;

    // ------------------------------------------------------------------------------- //
    // initial load
    // ------------------------------------------------------------------------------- //       
    google.maps.event.addDomListener(window, 'load', initialize);

<a href="../index.php">BACK</a><br> 

<h3>Update InfoWindow contents when marker is clicked</h3>
<p>This is useful when content of infoWindow changes frequently</p>
    <li>Enter some text in text box and click market to update text in InfoWindow, then show InfoWindow</li>        

Enter Some text to insert in marker:
    <input id='idSomeNewText' type="text" name="firstname" value="test value">  
<br/>  <br/>  
    <div id="map-canvas"></div>