MAPS - show tooltip next to marker

http://stackoverflow.com/a/11692807/922168

by bizamajig

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map" style="width:640px;height:480px;"></div>
<div class="map-notice">
    <span>Getting your current location</span>
</div>

CSS

.Window {
    position:absolute;
    font-size:12px;
    color:#656565;
    font-family:arial;
    font-weight:bold;
    background: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    border: #0088cc 3px solid;
    white-space: nowrap;
    box-shadow: rgba(0,0,0,.3) 0 1px 3px;
}

JavaScript

var map;

function initialize() {

    var myOptions = {
        zoom: 15,
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function(position) {
            // get current position
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            // Center the map on the position passed from Geolocation
            map.setCenter(pos);

            var domImg1 = new Image(),
                domImg2 = new Image(),
                domImg3 = new Image();

            var images = [domImg1, domImg2, domImg3],
                j = 0;

            for (i in images) {
                images[i].onload = function() {
                    if (++j == 3) {
                        // display the user avatar
                        var image1 = new google.maps.MarkerImage('http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png', null, null, new google.maps.Point(16, 49));
                        var marker1 = new google.maps.Marker({
                            //animation: google.maps.Animation.DROP,
                            position: pos,
                            map: map,
                            icon: image1,
                            zIndex: 2
                        });


                        // also display avatar frame on top of the avatar above
                        var image2 = new google.maps.MarkerImage('http://dl.dropbox.com/u/1597153/pin-white.png');
                        var marker2 = new...