Here you are the google map custom infobox template,
the js library can be downloaded here
and the API document is here
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
<script type="text/javascript">
var gMap;
var ib;
$(window).load(window_load);
function initMap() {
var _mapOptions = {
center: new google.maps.LatLng(22.302698, 114.160501),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
gMap = new google.maps.Map(document.getElementById("mapArea"), _mapOptions);
}
function setMarker() {
var _mOptions = {
position:new google.maps.LatLng(22.302698, 114.160501),
map:gMap
}
var _marker = new google.maps.Marker(_mOptions);
ib.open(gMap, _marker)
google.maps.event.addListener(_marker, 'click', function() {
if(ib.getVisible()){
ib.close();
}else{
ib.open(gMap, _marker)
}
});
}
function setInfoBox() {
var _infoBoxOptions = {
content: "<div class='divInfoContent'>hello world~~</div>",
alignBottom:true,
closeBoxURL: "",
pixelOffset : new google.maps.Size(-20, -30),
boxStyle: {
width: 100,
height: 75,
background: "url(http://www.clker.com/cliparts/6/b/2/4/1197148387581632758SRD_comic_clouds_2.svg.thumb.png) no-repeat"
}
}
ib = new InfoBox(_infoBoxOptions);
}
function window_load(){
initMap();
setInfoBox();
setMarker();
}
</script>
</head>
<style>
#mapArea {
width: 480px;
height: 360px;
margin: 0 auto;
}
.divInfoContent {
padding: 10px 20px;
}
</style>
<body>
<div id="mapArea"></div>
</body>
</html>
