BACK

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>
<html>
<head>
<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>

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

</style>
<script src="http://maps.googleapis.com/maps/api/js" 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");
        fnPlaceMarkers(minneapolis,"Minneapolis");          
		
		
		//console.log(gmarkers);
      }

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

		// save the info we need to use later 
		gmarkers.push(marker);
		
        // 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
		infoWnd.setContent(newText);

		 // Open InfoWindow
		infoWnd.open(map, 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);


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

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

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

<br/>
<br/>

</body>
</html>