Google map info window with tabbed content, tabbed info window, using infobubble.js

by sjmcpherson

HTML

<script src="http://googlemapapitutorial.com/js/infobubble.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Google Maps API V3: Multi-Tab InfoWindow</title>

<div id="map_canvas"></div>

CSS

body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}

JavaScript

map_initialize(); // load map
function map_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: 450,
            minWidth: 450,
            padding: 10,
            shadowStyle: 2,
            borderRadius: 0,
            maxHeight: 300,
            borderWidth: 0,
            minHeight: 300,
            backgroundColor: 'rgba(0,0,0,0.9)',
        });

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


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