google maps

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;ext=.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    width:100%;
    height:100%;
}

JavaScript

var map;
var infoBubble;

// Initial position of the map
var center = new google.maps.LatLng(-25.363882, 131.044922);

function initialize() {
    // Map options
    var mapOptions = {
        zoom: 4,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Attach the map to the document
    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
    // The marker
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-25.363882, 131.044922),
        map: map,
        title: 'marker7'
    });

    infoBubble = new InfoBubble({
        maxWidth: 200,
        content: '<a class="dialog" href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg" target="_blank"><img src="https://lh4.googleusercontent.com/-_Cox6aEnSkU/UQ_B0LK4khI/AAAAAAAAAzw/4H4dsWGPgeE/s150/go-button.png"/></a>',
        position: new google.maps.LatLng(-34.397, 150.644)
    });


    google.maps.event.addListener(marker, 'click', function () {
        infoBubble.open(map, marker);
        google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
            $(".dialog").fancybox({
                width: '200px',
                height: '200px',
                closeClick: true
            });
        });
    });
}

google.maps.event.addDomListener(window, 'load', initialize);