Google Maps v3 Infobox Plugin

HTML

<!-- 
I know JSFiddle doesn't like it when you put the resources here, but
cut and paste is easier this way.
 -->

<!-- Required JS: -------------------------->

<script type="text/javascript" src="//maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="//rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
    var loc, map, marker, infobox;
    
    loc = new google.maps.LatLng(-33.890542, 151.274856);
    
    map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: loc,
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    marker = new google.maps.Marker({
        map: map,
        position: loc,
        visible: true
    });

    infobox = new InfoBox({
         content: document.getElementById("myInfobox"),
         disableAutoPan: false,
         pixelOffset: new google.maps.Size(-65, -140),
         boxStyle: {
            width: "100px"
        },
        closeBoxMargin: "0px -10px 0 0",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });
    
    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(loc);
        //Give it a little time to set up the infobox.  This time may need to be increased, especially for mobile devices.
        setTimeout(function() {
            document.getElementById("theBubble").className = "";
        }, 75);
    });
    
    google.maps.event.addListener(infobox, 'closeclick', function(e) {
        document.getElementById("theBubble").className = "hidden";
    });
    
    
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<!-- Example CSS: -------------------------->

<style>
    .infobox-wrapper {
    display:none;
}

#theBubble {
    position:relative;
    /* The initial position is moved around to...