var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

var topRight=gmap.getProjection().fromLatLngToPoint(gmap.getBounds().getNorthEast ());
var bottomLeft=gmap.getProjection().fromLatLngToPoint(gmap.getBounds().getSouthWest());
var scale=Math.pow(2,gmap.getZoom());
var worldPoint=gmap.getProjection().fromLatLngToPoint(marker.getPosition());
var point = new google.maps.Point((worldPoint.x-bottomLeft.x)*scale,(worldPoint.y-topRight.y)*scale);

document.write('<div id="overlay" style="z-index: 1000; position: absolute;display:none;width:200px;height:100px;background-color:white;border:1px solid grey;padding:10px;">ANY CUSTOM FANCY OVERLAY HERE<br/><br/><br/><br/><br/><br/><a href="#" id="close">close</a></div>');
document.write('<div id="map" style="width:500px; height:500px;"></div>');
 
// Get center
var map_center = new google.maps.LatLng(50.1700235000, 4.7319823000);
 
// Load google map
var map = new google.maps.Map( document.getElementById("map"),  {
	zoom: 3,
	center: map_center,
	mapTypeId: google.maps.MapTypeId.HYBRID,
	panControl: false,
	streetViewControl: false,
	mapTypeControl: false
});
 
var pos;
var marker_list = [];
for(var i = 0 ; i < 10 ; i++) {
	pos = new google.maps.LatLng(Math.floor(Math.random()*100), Math.floor(Math.random()*50));
	marker_list.push( new google.maps.Marker({
		position: pos, 
		map: map, 
		title: 'Title',
		icon: '/other/gmap/marker.gif'
	}));
	var storyClick = new Function("event", "markerClick("+i+");");
	google.maps.event.addListener(marker_list[i], 'click', storyClick);
}
 
function markerClick(num) {
	var topRight=map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
	var bottomLeft=map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    	var scale=Math.pow(2,map.getZoom());
	var worldPoint=map.getProjection().fromLatLngToPoint(marker_list[num].getPosition());
	var point = new google.maps.Point((worldPoint.x-bottomLeft.x)*scale,(worldPoint.y-topRight.y)*scale);
 
        $("#overlay").css({
	    left:($("#map").position().left + point.x - $("#overlay").width()/2),
	    top:($("#map").position().top + point.y - $("#overlay").height() - 50)
	});
        $("#overlay").show();
}
 
$('#close').click(function(e) {
    e.preventDefault();
    $("#overlay").hide();
});
 
google.maps.event.addListener(map, 'center_changed', function() {
        $("#overlay").hide();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
        $("#overlay").hide();
});
 

document.write('<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>');
document.write('<div style="padding-bottom:10px;"><input type="text" name="address" value="O. J. Brochs g 16a, Bergen" style="width:400px;border:1px solid black"><input type="button" name="search" value="Geocode"></div>');
document.write('<div id="coords"></div>');
document.write('<div id="gmap" style="width:570px; height:500px;"></div>');
 
$(document).ready(function() {
 
	// Load google map
	var map = new google.maps.Map( document.getElementById("gmap"),  {
		center: new google.maps.LatLng(0,0),
		zoom: 3,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		panControl: false,
		streetViewControl: false,
		mapTypeControl: false
	});
 
 
	$('input[name=search]').click(function() {
 
		var geocoder = new google.maps.Geocoder(); 
		geocoder.geocode({
				address : $('input[name=address]').val(), 
				region: 'no' 
			},
		    function(results, status) {
		    	if (status.toLowerCase() == 'ok') {
					// Get center
					var coords = new google.maps.LatLng(
						results[0]['geometry']['location'].lat(),
						results[0]['geometry']['location'].lng()
					);
					$('#coords').html('Latitute: ' + coords.lat() + '    Longitude: ' + coords.lng() );
 
					map.setCenter(coords);
					map.setZoom(18);
 
					// Set marker also
					marker = new google.maps.Marker({
						position: coords, 
						map: map, 
						title: $('input[name=address]').val(),
					});
 
		    	}
			}
		);
	});
 
});