Required Javascript links:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

If you are developing locally try using :
http://maps.googleapis.com/maps/api/js?v=3&sensor=false

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

Javascript code:

// Map initialization function
function initialize() {

//location of the map
 var setLoction = new google.maps.LatLng(-38.197982, 145.230367);

//style of the map
 var styles = [ { "featureType": "landscape", "stylers": [ { "saturation": -100 }, { "lightness": 65 }, { "visibility": "on" } ] }, { "featureType": "poi", "stylers": [ { "saturation": -100 }, { "lightness": 51 }, { "visibility": "simplified" } ] }, { "featureType": "road.highway", "stylers": [ { "saturation": -100 }, { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "stylers": [ { "saturation": -100 }, { "lightness": 30 }, { "visibility": "on" } ] }, { "featureType": "road.local", "stylers": [ { "saturation": -100 }, { "lightness": 40 }, { "visibility": "on" } ] }, { "featureType": "transit", "stylers": [ { "saturation": -100 }, { "visibility": "simplified" } ] }, { "featureType": "administrative.province", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "on" }, { "lightness": -25 }, { "saturation": -100 } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "hue": "#ffff00" }, { "lightness": -25 }, { "saturation": -97 } ] } ];

//map options
 var myMapOptions = {
 zoom: 16, // sets the zoom size
 scrollwheel: false, //disabling scroll wheel
 navigationControl: false, // disable drag on the map
 mapTypeControl: false, 
 scaleControl: false, //disabling scaling
 draggable: false, //disabling drag
 center: setLoction, // center location
 styles: styles,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

//assigning map to canvas
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

//setting up the marker icon
 var marker = new google.maps.Marker({
 map: theMap,
 draggable: false,
 position:setLoction,
 icon:'<?php echo get_template_directory_uri();?>/images/icon-contactus.png',
 visible: true
 });

//centering the google map
 google.maps.event.addDomListener(window, "resize", function() {
 var center = theMap.getCenter();
 google.maps.event.trigger(theMap, "resize");
 theMap.setCenter(center);
 });

//Panning map position
 theMap.panBy(140,-50); // offseting the map position

//setting up information box
var boxText = document.createElement("div");
boxText.style.cssText = "margin-left: 197px;width:231px; color:rgb(83, 131, 22); margin-top: -129px; background: none; padding: 5px;";
 boxText.innerHTML = "<h1 style='color:#000;margin-top: 10px; padding: 0; '>Here we are!</h1><h4>Pearcedale,<br/> melbourne victoria</h4>";

//options for information box
var myOptions = {
 content: boxText
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, 0)
 ,zIndex: null
 ,boxStyle: {
 background: "url('tipbox.gif') no-repeat"
 ,opacity: 0.75
 ,width: "280px"
 }
 ,vantuan:2012
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxWidth: '0px'
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };

google.maps.event.addListener(marker, "click", function (e) {
 ib.open(theMap, this);
 });

var ib = new InfoBox(myOptions);

ib.open(theMap, marker);

}

 jQuery(function(){
 //initialising the map display
 initialize();
 });

HTML setting up the canvas

<div id="map_canvas" style="height:500px; width:100%"></div>