1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Basic Google Maps Example - Tabbed InfoWindows from Xml (APIv2)</title>




 		<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAZBe7uHI90ESk2XAmWRL3RxR6u04U0tImA3bfwZ3-HKdEno7z2xRk2YE6OkudtBX5qy0vLrgbf1DUCg"></script>
		<script type="text/javascript">
		google.load("jquery", '1.3');
		google.load("maps", "2.x");
		</script>
		
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				var map = new GMap2($("#map").get(0));
				var chicoCA = new GLatLng(39.73399, -121.845074);
				map.setCenter(chicoCA, 13); //zoom
				
				var bounds = map.getBounds();
				var southWest = bounds.getSouthWest();
				var northEast = bounds.getNorthEast();
				var lngSpan = northEast.lng() - southWest.lng();
				var latSpan = northEast.lat() - southWest.lat();
				var markers = [
				(39.729308,-121.854087)
				];
				
				for (var i = 0; i < markers.length; i++) {
					var point = new GLatLng(markers);
					marker = new GMarker(point);
					map.addOverlay(marker);
					markers[i] = marker;
				}
				
				$(markers).each(function(i,marker){
					$("<li />")
						.html("Point "+i)
						.click(function(){
							displayPoint(marker, i);
						})
						.appendTo("#list");
					
					GEvent.addListener(marker, "click", function(){
						displayPoint(marker, i);
					});
				});
				
				$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
				
				function displayPoint(marker, index){
					$("#message").hide();
					
					var moveEnd = GEvent.addListener(map, "moveend", function(){
						var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
						$("#message")
							.fadeIn()
							.css({ top:markerOffset.y, left:markerOffset.x });
					
						GEvent.removeListener(moveEnd);
					});
					map.panTo(marker.getLatLng());
				}
			});
		</script>

		<style type="text/css" media="screen">
			#map { float:left; width:500px; height:500px; }
			#message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }
			#list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
			#list li { padding:10px; }
			#list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }
		</style>
	</head>
	<body>
		<div id="map"></div>
		<ul id="list"></ul>
		<div id="message" style="display:none;">
			Test text.
		</div>
	</body>

</html>