InfoBubble

A InfoBubble is a customizable css3 infowindow of google maps

Note: Be sure to include infobubble.js or infobubble_packed.js in your document header after the Google Maps JavaScript API V3 has been included.

	<script src="/path/to/infobubble.js" type="text/javascript"></script>

Call infobubble

var mapCenter = new google.maps.LatLng(-35.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
  zoom: 8,
  center: mapCenter,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(-35, 150),
  draggable: true
});

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

infoBubble2 = new InfoBubble({
  map: map,
  content: '<div class="phoneytext">Some label</div>',
  position: new google.maps.LatLng(-35, 151),
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 4,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 30,
  backgroundClassName: 'phoney',
  arrowStyle: 2
});

infoBubble.open(map, marker);
infoBubble2.open();