先上张效果图

参考效果

all right，要使用Google Map API首先你需要载入一个Google提供的Js文件，链接后面的参数也需要注意一下，移动设备可能需要一些针对性的设置。这里我的链接是这样的：

接下来，笔者习惯是用jquery框架来做的，不习惯的筒子可以跳过，不过jq这个框架真心好用的说

好了接下来要在BODY里面建立两个DIV ELEMENT

一个是用来显示地图的，我把它的ID命名为map

另一个是用于存放图中文本框内容的，我把它的ID命名为info,并将其css 中display 属性设为 none,然后将要在文本框中显示的内容放在里面

    

    

        
Hello I`m here!
        想知道更多关于我的资料?快到这里去看看吧！
    

好了，接下来是最重要的js部分了，

代码如下

    $(function(){
        (function()
        {
            var Gmap_config={
                zoom: 19,
                //zoom属性设置缩放
                center: new google.maps.LatLng(22.530, 113.3923),
                //这里是设置地图的中心点坐标，值得一提的是google map中所有的坐标对象都需要以对象的形式表示
                //要获取自己想要的坐标可以到 http://ditu.google.com 去查询
                mapTypeId: google.maps.MapTypeId.ROADMAP
                //这里设置地图的类型GOOGLE提供了四种地图类型，这里我选用是最普通的ROADMAP类型
            };
            //地图设置
            var Gmap_object=new google.maps.Map(document.getElementById('map'), Gmap_config);
            //设置好地图的设置后，就可以将地图在指定的Element中生成了，这里实例化了一个叫Gmap_object的对象，在其构造时添加了两个参数
            //参数1是目标Element的引用，不过用jquery的筒子记得不要使用$()形式，应为这里只会接受HTML Element，而由jq引用的是普通Object
            //参数2是上面我们设置好的选项对象
            var Gmap_my_marker=new google.maps.Marker({
                position:new google.maps.LatLng(22.5297, 113.3923),
                //position属性设置Marker的坐标
                map:Gmap_object,
                //map属性设置目标Marker所在的Map对象，也就是存在于哪个地图中
                title:'I`m here!'
//              //title属性则用于设置标识的标题，当用户鼠标移动到Marker上时，会显示title里面的内容
            });
            //这里实例化一个Marker的对象，用于标识目标坐标点.
            var Gmap_info_window=new google.maps.InfoWindow({
                content:$('#info').html()
                //content属性设置文本框内容，这里我们载入之前设置好再info里面的内容
            });
            //这里实例化一个InfoWindow的对象，也就是我们覆盖在地图上，用于标识的文本框
            //不过需要注意的的是，InfoWindow对象不会在生成地图时就显示在地图上，google可以让我们手动设置它以什么方式显示
            //因此下面需要用open()方法将其载入            
            Gmap_info_window.open(Gmap_object, Gmap_my_marker);
            //open方法有两个参数
            //第一个是目标InfoWindow所在的Map对象
            //另一个是目标InfoWindow所注释的Marker对象
        })();
    });