More Examples

Simple Google Map with two Markers with InfoWindows.


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:

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:

<!DOCTYPE html>
<html lang="en">
    <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">
		font-family: Arial;
		font-size: 16px;
		#map-canvas, #side-bar {        
		height: 500px;
		width: 600px;        
	pre {
		border:1px solid #D6E0F5;
	/* fix for unwanted scroll bar in InfoWindow */
	.scrollFix {
		line-height: 1.35;
		overflow: hidden;
		white-space: nowrap;
	<script src="" 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");

		// ------------------------------------------------------------------------------- //
		// create markers on the map
		// ------------------------------------------------------------------------------- //
		function fnPlaceMarkers(myLocation,myCityName){
			var marker = new google.maps.Marker({
				position : myLocation
			// Renders the marker on the specified 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, marker);

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

	<a href="../index.php">BACK</a><br>	
	<h3>Simple Google Map with two Markers with InfoWindows</h3>
		<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>		
		<div id="map-canvas"></div>