Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Multi-Tab InfoWindow Example for Google Maps API

View Example


Notes

Click the marker to see the multi-tab infowindow. InfoBubble package is used in this example. InfoBubble allows developers to easily add multi-tab infowindow on the map.
        var  infoBubble = new InfoBubble({
          maxWidth: 300
        });

        var div = document.createElement('DIV');
        div.innerHTML = 'Hello';

        infoBubble.addTab('Tab 1', div);
        infoBubble.addTab('Tab 2', "<B>This is tab 2</B>");

        google.maps.event.addListener(marker, 'click', function() {
          if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
          }
        });


Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Multi-Tab InfoWindow</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var myLatlng = new google.maps.LatLng(37.286172, -121.80929);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'A Customized InfoWindow Marker'
        });

        var  infoBubble = new InfoBubble({
          maxWidth: 300
        });

        var div = document.createElement('DIV');
        div.innerHTML = 'Hello';

        infoBubble.addTab('Tab 1', div);
        infoBubble.addTab('Tab 2', "<B>This is tab 2</B>");

        google.maps.event.addListener(marker, 'click', function() {
          if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
          }
        });
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>


Other Used Files

js/infobubble.js