how to realize GMap

GoogleMaps = function() {
    var t = this;
    t.bgImage = 'popover-bg.png';
    t.closeImage = 'popover-close.png';
    t.modalBgImage = 'popover-modal-bg.png';
    t.showing = false;
    t.transitioning = false;
    t.element = null;
    t.duration = 300;
    t.popoverMainId = 'popover-main';
    t.popoverContainerId = 'popover-container';
    t.zoom = 16;
    t.debugBox = null;
	
    $(function(){

        // cache the popover images
        var i1 = document.createElement('img');
        i1.src = t.bgImage;
        var i2 = document.createElement('img');
        i2.src = t.closeImage;
        var i3 = document.createElement('img');
        i3.src = t.modalBgImage;
    });
    
    t.show = function(address)
    {
        if (t.showing || typeof(address) == 'undefined' || t.transitioning)
            return;
        
        t.showing = true;
        t.transitioning = true;
        
        if (t.element == null)
        {
            t.element = $('<div id="popover"></div>');
			t.element.addClass('popover-map');
            var bg = $('<div id="popover-bg"></div>');
            bg.css({'opacity':.5});
            t.element.append(bg);
            var main = $('<div id="'+t.popoverMainId+'"></div>');
            t.element.append(main);
            var container = $('<div id="'+t.popoverContainerId+'"></div>');
            main.append(container);
            var close = $('<a href="#" id="popover-close">Close</a>');
            close.click(function(event){
                event.preventDefault();
                t.hide();
            });
            main.append(close);
			
            t.element.hide();
            $('body').append(t.element);
        }

        $('#'+t.popoverContainerId).html('');

		$('#'+t.popoverMainId).css({
									"height" : 593,
									"width" : 696,
									"position" : "fixed"
									});		
		
		$('#'+t.popoverContainerId).css({
										"border" : "1px solid #C2C2C2",
										"height" : 585,
										"margin" : 3,
										"padding" : 0,
										"width" : 687
									});
		
		// adjustement for iPhone and Android
		if( detectMobileDevice() ){
			$('#'+t.popoverMainId).css({
									"height" : "100%",
									"width" : "100%",
									});		
		
			$('#'+t.popoverContainerId).css({
									"height" : "100%",
									"width" : "100%",
									"margin" : 0
									});			
		}
		
        // Map
		var geocoder = new google.maps.Geocoder(); 
		if (geocoder) {
			geocoder.geocode(
				{ "address" : address },
				function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
							Lng = results[0].geometry.location.lng();
							Lat = results[0].geometry.location.lat();

							var latlng = new google.maps.LatLng(Lat, Lng);
							var mapOptions = {
								zoom: t.zoom,
								center: latlng,
								mapTypeId: google.maps.MapTypeId.ROADMAP
							};
							var map = new google.maps.Map(document.getElementById(t.popoverContainerId), mapOptions);
							var marker = new google.maps.Marker({
								position: map.getCenter(), 
								map: map
							});
					}
				}
			);
		}
		// end Map
        $(window).bind('resize.popover', t.resize);
        t.resize();

        t.element.fadeIn(t.duration, function(){
            t.transitioning = false;
        });
		
		$("body").keypress(function(e){
			if ( e.keyCode == 27 ) {
				t.hide();
			}
		});
		
	}
    
    t.hide = function()
    {
        if (!t.showing || t.transitioning)
            return;

        t.showing = false;
        t.transitioning = true;

        t.element.fadeOut(t.duration, function(){
            $(window).unbind('resize.popover');
            t.element.hide();
            t.transitioning = false;
		    if ($.browser.msie && $.browser.version < 7)
			{
				$("select#city").css("visibility", "visible");
			}
        });
    }
    
    t.resize = function()
    {
        var h = $(document).height();
       /* var min = $('#header').height() + $('#main').height() + $('#footer').height();
        if (h < min)
            h = min;*/
        t.element.width($("#header-additional").width()).height(h);
        
        // ie6 has template problems that prevent the width of the window from being
        // correct. if that is ever fixed this code might not be necissary.
		if ($.browser.msie && $.browser.version < 7)
        {
			var d = $(".content") ;
            var o = d.offset();
            var p = $('#'+t.popoverMainId);
            var w = o.left + ((d.width() - p.width()) / 2);
			p.css({'position': "absolute"});
			p.css({'left':w});
			p.css({'top':'100'});
			$("select#city").css("visibility", "hidden");
        }
        // ie 7 can't center either, apparently
        else if ($.browser.msie && $.browser.version < 8)
        {
            var p = $('#'+t.popoverMainId);
            var w = $(window);
            var wf = (w.width() - p.width()) / 2;
            var hf = (w.height() - p.height()) / 2;
            p.css({'left':wf, 'top':hf, 'position': 'absolute'});
        }		
		
    }
    
  
    t.debug = function(str)
    {
        if (t.debugBox == null)
        {
            t.debugBox = $('<div></div>');
            t.debugBox.css({
                'position':'absolute',
                'top':'0px',
                'left':'0px'
            });
            $('body').append(t.debugBox);
        }
        t.debugBox.html(str);
    }
	
	t.hideEscape = function() {
		
	}
	
}

function detectMobileDevice() {
	var ua = navigator.userAgent;
	var checker = {
	  iphone: ua.match(/iPhone/),
	  blackberry: ua.match(/BlackBerry/),
	  android: ua.match(/Android/)
	}
	if (checker.iphone || checker.android || checker.blackberry ) {
		return true;
	} else {
		return false;
	}
}

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.4&sensor=false&language=cn&region=CN" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/4/16/main.js">
<script src="GoogleMaps.js" type="text/javascript" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript">
var googlemaps = new GoogleMaps();

jQuery.fn.toolTip = function() {
	if(!isPad) {
		
		this.unbind().hover(    
			function(e) {
				this.t = this.title;
				this.title = ''; 
				
				$('body').append( '<p id="p_toolTip">' + this.t + '</p>' );
							
				var tip =   $('p#p_toolTip').css({ "position": "absolute", "left": "5px", "line-height":"160%", "-moz-border-radius": "5px", "-webkit-border-radius": "5px", "z-index": "9998"});
				var target = $(this);
				
				var position = target.position();
				this.top = (position.top - 60); 
				this.left = (position.left + target.width());
				tip.css({"top": this.top+"px","left":this.left+"px"});
				tip.fadeIn("slow");
			},
			function() {
				this.title = this.t;
				$("p#p_toolTip").fadeOut("slow").remove();
			}
		);

	} else {
		
		var lastClicked;
		this.unbind().click(    
			function(e) {
			    if( !lastClicked ){
					lastClicked = this;
					rollover(this);
				} else {
					$("p#p_toolTip").fadeOut("slow").remove();
					if (lastClicked == this) {
						lastClicked = null;
					} else {
						lastClicked = this;
						rollover(this);						
					}
				}
			}
		);
		
	}
};

$(document).ready(function(){
		$("#storelocator a[title]").toolTip();
});

</script>
<div id="storelocator">
<span class="location_type"><a title="" href="#">  »</a></span>
<a href="javascript:googlemaps.show(' ')" class="location"> </a>