BACK

Simple Google Map with three markers displaying two InfoWindows each

This example illustrates a technique to add two infoWindows on each marker. We create two infoWindows on each marker, and use a global activeInfoWindow variable to track currently opened infoWindow. We use the Google Maps addlistener event handler to register click, mouseover and mouseout events.




To do: remove "X" in mouseover InfoWindow

	

	<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Google Map with multiple markers with InfoWindows on click and mouseover events</title>
    
	<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 : 7,
			  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 three 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);
			var falconHeights 	= new google.maps.LatLng(44.9917,-93.1664);

			// place markers
			fnPlaceMarkers(stPaul,"St Paul");
			fnPlaceMarkers(minneapolis,"Minneapolis");			
			fnPlaceMarkers(falconHeights,"Falcon Heights");			
		  }

		// ------------------------------------------------------------------------------- //
		// 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 - for mouseover
			var infoWnd = new google.maps.InfoWindow();						

			// create an InfoWindow -  for mouseclick
			var infoWnd2 = new google.maps.InfoWindow();
			
			// -----------------------
			// ON MOUSEOVER
			// -----------------------
			
			// add content to your InfoWindow
			infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '</div>');
			
			// add listener on InfoWindow for mouseover event
			google.maps.event.addListener(marker, 'mouseover', function() {
				
				// Close active window if exists - [one might expect this to be default behaviour no?]				
				if(activeInfoWindow != null) activeInfoWindow.close();

				// Close info Window on mouseclick if already opened
				infoWnd2.close();
			
				// Open new InfoWindow for mouseover event
				infoWnd.open(map, marker);
				
				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd;				
			}); 							
			
			// on mouseout (moved mouse off marker) make infoWindow disappear
			google.maps.event.addListener(marker, 'mouseout', function() {
				infoWnd.close();	
			});
			
			// --------------------------------
			// ON MARKER CLICK - (Mouse click)
			// --------------------------------
			
			// add content to InfoWindow for click event 
			infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '. <br/>This Infowindow appears when you click on marker</div>');
			
			// add listener on InfoWindow for click event
			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 - on click 
				infoWnd2.open(map, marker);
				
				// Close "mouseover" infoWindow
				infoWnd.close();
				
				// Store new open InfoWindow in global variable
				activeInfoWindow = infoWnd2;
			}); 							
			
		}
		
		// ------------------------------------------------------------------------------- //
		// initial load
		// ------------------------------------------------------------------------------- //		
		google.maps.event.addDomListener(window, 'load', initialize);
	
		
	</script>
	<a href="../index.php">BACK</a><br>	
	<br/>
	
	<h3>Simple Google Map with three markers displaying two InfoWindows each</h3>
	
	<p>This example illustrates a technique to add two infoWindows on each marker. We create two infoWindows on each marker, and use a global activeInfoWindow variable to track currently opened infoWindow. 	We use the Google Maps addlistener event handler to register click, mouseover and mouseout events. </p>
	
	<ul>
		<li>Hover over marker to display new infoWindow (and close any previous open infoWindow)</li>				
		<li>Move mouse off marker to close infoWindow</li>				
		<li>Click on marker to display infoWindow with more information</li>				
		<li>To close this infoWindow, hover over or click on another marker</li>				
				
	</ul>
	
	<br/>  
		<div id="map-canvas"></div>
	<br/>
	<br/>
	<p>To do: remove "X" in mouseover InfoWindow</p>	
 
	
	<pre>	

	</pre>	  
	
  </body>
</html>