HTML, CSS and JavaScript playground

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>MID - Money Investment Development</title>

var locations = [
              ['<h4>Bondi Beach</h4>', -33.890542, 151.274856],
              ['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
            ];

var content = [
              ['<div id="carousel-example-1" class="carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner"><div class="item active"><img src="http://i60.tinypic.com/25g70g9.jpg" alt=""></div><div class="item"><img src="http://i57.tinypic.com/ddgoia.jpg" alt="..."></div><div class="item"><img src="http://i58.tinypic.com/b3ws5c.jpg" alt="..."></div></div><a class="prev carousel-control" href="#carousel-example-1" role="button" data-slide="prev"></a><a class="next carousel-control" href="#carousel-example-1" role="button" data-slide="next"></a></div>'],
              ['<div id="carousel-example-2" class="carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner"><div class="item active"><img src="http://i60.tinypic.com/25g70g9.jpg" alt=""></div><div class="item"><img src="http://i57.tinypic.com/ddgoia.jpg" alt="..."></div><div class="item"><img src="http://i58.tinypic.com/b3ws5c.jpg" alt="..."></div></div><a class="prev carousel-control" href="#carousel-example-2" role="button" data-slide="prev"></a><a class="next carousel-control" href="#carousel-example-2" role="button" data-slide="next"></a></div>']
            ];

var map = new google.maps.Map(document.getElementById('map-container'), {
              zoom: 10,
              center: new google.maps.LatLng(-37.92, 151.25),
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: false,
              streetViewControl: false,
              panControl: false,
              zoomControlOptions: {
                 position: google.maps.ControlPosition.LEFT_BOTTOM
              }
            });

var markers = new Array();
                
            //var iconCounter = 0;
            var markerImg = 'http://i58.tinypic.com/dr9o5j.png';
            var activeMarkerImg = 'http://i58.tinypic.com/w6ph7c.png';
           
            
            // Add the markers and infowindows to the map
            for (var i = 0; i < locations.length; i++) {  
             var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                  map: map,
                  icon: markerImg
              });

markers.push(marker);

var myOptions = {
                 content: content[i][0]
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-125, -250)
                ,zIndex: null
                ,boxStyle: { 
                  width: "250px"
                 }
                ,closeBoxMargin: "0"
                ,closeBoxURL: ""
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
            };

var ib = new InfoBox(myOptions);
              
            google.maps.event.addListener(marker, "click", function (e) {
                ib.open(map, this);
            });

//ib.open(map, marker);

}

google.maps.event.addListener(map, 'click', function() {ib.close();});

function AutoCenter() {
              //  Create a new viewpoint bound
              var bounds = new google.maps.LatLngBounds();
              //  Go through each...
              $.each(markers, function (index, marker) {
                bounds.extend(marker.position);
              });
              //  Fit these bounds to the map
              map.fitBounds(bounds);
            }
            AutoCenter();

}
    </script>

</head>

<div class="col_map">
        		<div id="map-container" style="width:100%; height:100%;"></div>

</div>

</body>
</html>