Info Window on Google Maps API JavaScript v3

The Info Window on Google Maps is no more than a <div>, in the form of a cartoon balloon, with the position on the map defined through the coordinates of the corresponding marker.

Being the Info Window a <div>, it can be customized using CSS and it can also contain any other HTML elements therein.
Info Window contents can be defined at the start of the map, if the map contains only one marker, or later with a call to the API using the setContent() function.

When there is more than one marker on the map, the contents of the Info Window are defined when creating the marker. The same Info Window will be used for all markers.

Related articles:

• 5 ways to customize the Google Maps InfoWindow

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

How to Create an Info Window

Creating an Info Window for a single marker is fairly simple and meets the following requirements:

• Content - can be simple text or HTML
  
  JavaScript /map.jsen.marnoto.com

  var content = '<div id="iw_container">' +
        '<div class="iw_title">Maritime Museum of Ílhavo</div>' +
        '<div class="iw_content">Visit the cod aquarium at the Maritime Museum of Ílhavo.</div>' +
     '</div>';

• Create the new Info Window with API’s new google.maps.InfoWindow() constructor, and simultaneously instruct the Info Window must search for its content on the variable content previously defined
  
  JavaScript /map.jsen.marnoto.com

  var infowindow = new google.maps.InfoWindow({
     content: content
  });
  

• Open the Info Window using an API function that detects a click on the corresponding marker and opens the InfoWindow.
  The function google.maps.event.addListener(<marker>, <event>, <action>) is always alert waiting for a click (in this example the <event> is a click) on the marker <marker> (in this example only one marker is defined on the map), to run an action <action> The action on this example is a function that makes a call to the API (infowindow.open(<map>,<marker>) and asks the Info Window - defined with the variable infowindow - to be open ( .open() ) on the map defined on map , which coordinates must be the same as the marker, defined in marker.
  If the previous procedures seemed difficult, the next example will show how it’s actually really simple to open an Info Window in the corresponding marker.
  
  JavaScript /map.jsen.marnoto.com

  google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);
  });
  

The API inserts a link ( x ) on the top right so that the user can close the Info Window. Additionally a new event can be inserted - infowindow.close() - that closes the Info Window with a click on the map.
As the following example shows, this time the API is instructed to wait for a click on the map and, when that happens, closes the Info Window.

JavaScript /map.jsen.marnoto.com

  // event to close the infoWindow with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

All together now!

JavaScript /map.jsen.marnoto.com

var ilhavo = new google.maps.LatLng(40.604036,-8.665247);
var museum = new google.maps.LatLng(40.604382,-8.665983);

function initialize() {
   var mapOptions = {
      center: ilhavo,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
   };

   var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

   // variable to define the content of Info Window
   var content = '<div id="iw_container">' +
                  '<div class="iw_title">Maritime Museum of Ílhavo</div>' +
                  '<div class="iw_content">Visit the cod aquarium at the Maritime Museum of Ílhavo.</div>' +
                  '</div>';

   // creates the new Info Window with reference to the variable infowindow and establishes the content
   var infowindow = new google.maps.InfoWindow({
      content: content
   });

   // variable to define the option of the marker
   var marker = new google.maps.Marker({
      position: museum, // variable with the coordinates Lat and Lng
      map: map,
      title:"Maritime Museum of Ílhavo"
   });

   // procedure to show the Info Window using a click on the marker
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker); //map and marker are the variables defined previously
   });

  // event to close the infoWindow with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

View example

This example shows how to add a simple Info Window with HTML content. The Info Window can also accommodate links, images and forms.
All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.

CURIOSITY

The Maritime Museum of Ílhavo inaugurated in 2013 is the first Cod Aquarium in the country.
Museu Marítimo de Ílhavo

Download the necessary files for this example

• create_new_infowindow.zip

Share:

Tags:

Google Maps API V3 Info Window

Miguel Marnoto

My expertise in the Google Maps JavaScript API v3 is a consequence of my enthusiasm about maps and recognition of the importance that Google Maps service has on people lives.

Founder @ ViverAveiro.pt

• Facebook
• Google+
• Twitter
• LinkedIn
• Rss