How to Change the InfoWindow in Google Maps API

An info window is the small, floating, pop-up bubble that appears when you click on a push-pin called a location marker on a Google Map. By default, info windows look similar to a word-balloon with the stem of the balloon popping-out of the location marker. Using the Google Maps JavaScript API V3 "InfoWindow options" object, you can change the info window's location, the text displayed in the info window, and the maximum width of the info window.

Instructions

1. Access your HTML file and navigate in the code to where you define your Google Map.

2. Change the info window's content by modifying the text in the variable holding the window's text content. Find the variable name in the info window's content attribute. In the following code example, "windowText" is the variable defining the window's text.

   var info window = new google.maps.InfoWindow({
   content: windowText
   });

   Find the windowText variable and change the HTML text. For example, your code may look similar to this:

   var windowText = '<div id = "text" +
   <p>Paris is the capital of France. Paris is known as the City of Lights.</p>

   In this case, edit the HTML text between the paragraph tags, <p>, to change the info window's content.

3. Define the info window's maximum width by setting the "maxWidth" attribute in the "Info Window options" object. Adding to the code example above, the info window's maximum width is set to 400 pixels wide.

   var info window = new google.maps.InfoWindow({
   content: windowText
   maxWidth = 400
   });

4. Change the position of the info window from the default marker location to a new location using the "infowindow.setPosition" function.
   In the JavaScript code where you initialize the map, add the infowindow.setPosition" function. In the example below, the infoWindow will open on the 52.11111 latitude and the -100.1111 longitude.

   infowindow.setPosition (52.1111, -100.1111);

References

• Google Code: Google Maps Javascript API V3 Overlays