如何创建这样的信息气泡http://goo.gl/EcyxOr
在这张地图上。这个地图很好用，我只需要在我的标记上再放一个窗口（infobubble）
我认为这很容易，但是，你知道
感谢
var side_bar_html = "";
var gmarkers = [];
var map = null;
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-27.421409,-61.936722),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
//creates the marker
//marker 1
var point = new google.maps.LatLng(-27.421409,-61.936722);
var marker = createMarker(point,"Celta",contentString0,celta(),nonPartShadow)
//marker2
var point = new google.maps.LatLng(-28.421409,-51.224562);
var marker = createMarker(point,"Celta2",contentString1,celta2(),partShadow)
document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function createMarker(latlng, title, html, icon, shadow) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: icon,
title: title,
shadow: shadow
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
}
基于我翻译的Mike Williams v2教程的示例（这就是代码的来源）。
工作示例
代码：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Javascript API v3 Example: Adding a clickable sidebar</title>
<style type="text/css">
body {
font-size: 83%;
}
body, input, textarea {
font-family: arial, sans-serif;
}
#map {
width: 600px;
height: 500px;
}
#styles, #add-tab {
float: left;
margin-top: 10px;
width: 400px;
}
#styles label,
#add-tab label {
display: inline-block;
width: 130px;
}
.phoney {
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(112,112,112)),color-stop(0.51, rgb(94,94,94)),color-stop(0.52, rgb(57,57,57)));
background: -moz-linear-gradient(center top,rgb(112,112,112) 0%,rgb(94,94,94) 51%,rgb(57,57,57) 52%);
}
.phoneytext {
text-shadow: 0 -1px 0 #000;
color: #fff;
font-family: Helvetica Neue, Helvetica, arial;
font-size: 18px;
line-height: 25px;
padding: 4px 45px 4px 15px;
font-weight: bold;
background: url(../images/arrow.png) 95% 50% no-repeat;
}
.phoneytab {
text-shadow: 0 -1px 0 #000;
color: #fff;
font-family: Helvetica Neue, Helvetica, arial;
font-size: 18px;
background: rgb(112,112,112) !important;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent( '<div class="phoneytext">'+contentString+'<div>');
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
}
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
// add the points
var point = new google.maps.LatLng(43.65654,-79.90138);
var marker = createMarker(point,"This place","Some stuff to display in the First Info Window")
var point = new google.maps.LatLng(43.91892,-78.89231);
var marker = createMarker(point,"That place","Some stuff to display in the Second Info Window")
var point = new google.maps.LatLng(43.82589,-78.89231);
var marker = createMarker(point,"The other place","Some stuff to display in the Third Info Window")
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new InfoBubble(
{
map: map,
content: '<div class="phoneytext">Some label</div>',
position: new google.maps.LatLng(-35, 151),
shadowStyle: 1,
padding: 0,
backgroundColor: 'lightblue',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: false,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'phoney',
arrowStyle: 2,
maxWidth: 300
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic2.htm
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map_canvas" style="width: 550px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
</body>
</html>