Google Map API combined with jquery (2)--callout, floating window

Open the Information floating window

To modify JavaScript code:

Map.js

$(document).ready(function()
{
　　 if (GBrowserIsCompatible()) {
　　　　 var map = new GMap2(document.getElementById("map"));
　　　　map.addControl(new GSmallMapControl());
　　　　map.addControl(new GMapTypeControl());
　　　　//开启滚轮伸缩效果－－鼠标滚轮向前滚放大地图，反之缩小
　　　　map.enableScrollWheelZoom();
　　　　map.setCenter(new GLatLng(36.94,106.08),4);
　　　　//打开信息浮窗--需要在设置地图中心点后进行
　　　　map.openInfoWindow(map.getCenter(),document.createTextNode("你好，中国"));
　　　　$(window).unload(function (){
　　　　　　　 $('.').unbind();
　　　　　　　 GUnload();
　　　　　 });
　　 }else
　　 {
　　　　 alert('你使用的浏览器不支持 Google Map!');
　　 }
});

In the center of the map will display information floating window (relatively rough)

Information Floating Window Effect chart

Map marking

Map.js

$ (document). Ready (function ()
{
if (gbrowseriscompatible ()) {
var map = new GMap2 (document.getElementById ("map"));
Map.addcontrol (New Gsmallmapcontrol ());
Map.addcontrol (New Gmaptypecontrol ());
Turn on the wheel expansion effect--the mouse wheel roll forward to enlarge the map, and reduce
Map.enablescrollwheelzoom ();
Map.setcenter (New Glatlng (36.94,106.08), 4);
Add 10 random markers to the map
var bounds = Map.getbounds ();
var southwest = Bounds.getsouthwest ();
var northeast = Bounds.getnortheast ();
var Lngspan = northeast.lng ()-southwest.lng ();
var Latspan = Northeast.lat ()-Southwest.lat ();
for (var i = 0; i < i++) {
var point = new Glatlng (Southwest.lat () + Latspan * Math.random (),
SOUTHWEST.LNG () + Lngspan * math.random ());
Map.addoverlay (New Gmarker (point));
}
Randomly take five points into a polyline, 5 points in order to prevent the line by longitude to cross.
var points = [];
for (var i = 0; i < 5; i++) {
Points.push (New Glatlng (Southwest.lat () + Latspan * Math.random (),
SOUTHWEST.LNG () + Lngspan * math.random ());
}
Points.sort (Function (p1, p2) {
Return p1.lng ()-p2.lng ();
});
Map.addoverlay (new Gpolyline (points));

Click event handle
Gevent.addlistener (Map, "click", Function (marker, point) {
if (marker) {
Map.removeoverlay (marker);
} else {
Map.addoverlay (New Gmarker (point));
}
});
$ (window). Unload (function () {
$('.'). Unbind ();
Gunload ();
});
}else
{
Alert (' You are using a browser that does not support Google map! ');
}
});