Simple Google Map with two Markers with InfoWindows

Simple Google Map with two Markers with InfoWindows.

Click on Marker to activate infoWindow
Click on the x in right corner or click on another Marker to close first infoWindow

google.maps.event.addListener

JavaScript within the browser is event driven, meaning that JavaScript responds to interactions by generating events, and expects a program to listen to events. There are two types of events:

User events (such as "click" mouse events) are propagated from the DOM to the Google Maps API. These events are separate and distinct from standard DOM events.
MVC state change notifications reflect changes in Maps API objects and are named using a property_changed convention.

Each Maps API object exports a number of named events. Programs interested in certain events will register JavaScript event listeners for those events and execute code when those events are received by registering addListener() event handlers on the google.maps.event namespace.

In this we use the Google Maps addlistener event handler to register click event notifications. The addlistener method takes an object, an event to listen for, and a function to call when the specified event occurs. In this example, when user clicks on marker, InfoWindow is displayed.

Google Map addlistener events include:

bounds_changed - Fired when the viewport bounds have changed
center_changed - Fired when the map center property changes
click MouseEvent - Fired when the user clicks on the map
dblclick MouseEvent - Fired when the user double-clicks on the map
drag - Fired repeatedly while the user drags the map
dragend - Fired when the user stops dragging the map
dragstart - Fired when the user starts dragging the map
heading_changed - Fired when the map heading property changes
idle - Fired when the map becomes idle after panning or zooming
maptypeid_changed - Fired when the mapTypeId property changes
mousemove MouseEvent - Fired whenever the user's mouse moves over the map container
mouseout MouseEvent - Fired when the user's mouse exits the map container
mouseover MouseEvent - Fired when the user's mouse enters the map container
projection_changed - Fired when the projection has changed
resize - Fired when the map (div) changes size
rightclick MouseEvent - Fired when the user right-clicks on the map
tilesloaded - Fired when the visible tiles have finished loading
tilt_changed - Fired when the map tilt property changes
zoom_changed - Fired when the map zoom property changes

	
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<title>Simple Google Map with two Markers with InfoWindows</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body{
		padding:20px
		font-family: Arial;
		font-size: 16px;
	}
		#map-canvas, #side-bar {        
		height: 500px;
		width: 600px;        
	}
	pre {
		border:1px solid #D6E0F5;
		padding:5px;
		margin:5px;
		background:#EBF0FA;
	}	
	
	/* 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 type="text/javascript">

		"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.95273,-93.08915);
			var minneapolis 	= new google.maps.LatLng(44.97994,-93.26630);

			// 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('<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 active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Open InfoWindow
				infoWnd.open(map, marker);

				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd;
			}); 							
		}
	
		
		// ------------------------------------------------------------------------------- //
		// initial load
		// ------------------------------------------------------------------------------- //		
		google.maps.event.addDomListener(window, 'load', initialize);

	
		
	</script>
	<a href="../index.php">BACK</a><br>	
	<br/>
	
	<h3>Simple Google Map with two Markers with InfoWindows</h3>
	<ul>
		<li>Click on Marker to activate infoWindow</li>		
		<li>Click on the x in right corner or click on another Marker to close first infoWindow</li>		
	</ul>
	
	<br/>  
		<div id="map-canvas"></div>
	<br/>
	<br/>
  </body>
</html>