Adding Info Windows On Google Map

Introduction

Using infoWindow on Google Maps we can display content and information regarding locations, showing useful information, useful links displayed on the window, content and many more. The info window has an area for content and a stem that points to a location on the map. Generally, info windows open up on a marker but we can also attach these windows with latitude and longitude. Info windows are overlays on the Google Map showing text, images or links. These are overlays attach to locations.

Adding Info Windows On The Map

We can add info windows on the map using the google.maps.InfoWindow constructor. This InfoWindow constructor takes multiple parameters or fields as InfoWindowOptions literal. This literal contains the following parameters:
  • content - This field contains text, images, links or DOM elements as the content of the info window.
  • pixelOffset - It defines the offset between the window and the location where the window is displayed. Generally, we use the default value for this field.
  • position - This field contains the LatLng of the location where the info window is shown. Generally, we will show the info window on the marker. In that case, the window takes its position from the marker itself. There is no need to specify this field explicitly in that case. If we want to open the window on the map without the marker then we need to specify the position. We can obtain location using a Geocoding service.
  • maxWidth - specify the maximum width for the window in pixels. By default, an info window expands to fit its content. 

Opening Info Window

Now we will see how to open an info window using infoWindow.open() method. This method accepts two parameters: the first argument is a map(on which we need to display or open the window) and it is a required argument and the second one is the marker(optional argument). If we will not specify the marker here then we should specify the position property of google.maps.infoWindow constructor.


  var infowindow = new google.maps.InfoWindow({
        content: '<div>Hello</div>',
        position: { lat: -45.67677, lng: -90.253456 },        
      });
 
The syntax for opening info window is as follows:

 infowindow.open(map, marker); // Specify map and marker here. We can skip marker here if position property is defined with window options

   Now we will see an example where we will add an info window on marker click.



<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info Window On Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="Gmap"></div>
  <script>
    var marker;
    var windowContent = '<div><h1>Info Window Content</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p ></div > '
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);

      var infowindow = new google.maps.InfoWindow({
        content: windowContent,
        pixelOffset: new google.maps.Size(0, -5),
      });

      marker = new google.maps.Marker({
        position: { lat: -45.67677, lng: -90.253456 },
        map: map,
      });
      marker.addListener('click', onMarkerClick);

      function onMarkerClick() {
        infowindow.open(map, marker);
      }
    }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDShdMS18_xwv3VHpzQlGgr10v0SmD7SyE&callback=initMap">
    </script>
</body>
</html>

Note: If we write infowindow.open(map) instead of infowindow.open(map. marker). It means we are not specifying the marker here, then we need to specify position property in InfoWindowOptions to open the info window.

We can specify different options for info windows as follows:

   var infowindow = new google.maps.InfoWindow({
        content: windowContent,
        pixelOffset: new google.maps.Size(0, -5),
        maxWidth: 200,
        position: { lat: -45.67677, lng: -90.253456 },
      });

Closing And Moving Info Window

We can close the info window by clicking the close control at the top right corner of the info window. We can even close the window using the close() method on the info window.
We can move the info window by setting the position to a new position using the setPosition() method on the info window. Or we can attach the window to a new marker using infowindow.open(map. marker). 

NOTE: We cannot customize the info window because the InfoWindow class doesn't provide that feature. So we can't do customization on this info window.

Comments