Working with a simple infowindow in google map ~ Programming Share

Infowindow displays in a floating window above the map. When we click on the marker, it will show us a floating window that contain the details of the location above the map. The info window looks a little like a comic-book word balloon.
In this post, I'd to show you how to work with infowindow.
Like previous post, we will set the latitude, longitude of the location:
var latlng = new google.maps.LatLng(10.823099, 106.629664);

We also set the map option:
var myOptions =
        {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
Then, type the following code for infowindow:
var contentString =
      '<div style="width: 300px; height: 100px;">'+
      '<ul>'+
        '<li>Company name: ABC</li>'+
        '<li>Address: 130 Truong Chinh, Tan Binh Dist</li>'+
        '<li>City: Ho Chi Minh</li>' +
        '<li>Country: Vietnam</li>' +
      '</ul>'+
      '</div>';

        var infoWindow = new google.maps.InfoWindow({ content: contentString });
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);
        });

google.maps.InfoWindow constructor: help us to define the infowindow.
content: the details of content in the infowindow that was defined before.
google.maps.event.addListener: catch the click event on the marker and open the infowindow