Google maps 在此地图上创建Infobubble_Google Maps_Google Maps Api 3_Google Maps Markers_Infowindow_Infobubble

Google maps 在此地图上创建Infobubble

google-maps google-maps-api-3

Google maps 在此地图上创建Infobubble,google-maps,google-maps-api-3,google-maps-markers,infowindow,infobubble,Google Maps,Google Maps Api 3,Google Maps Markers,Infowindow,Infobubble,如何创建这样的信息泡沫在这张地图上。这张地图很好用，我只需要在我的标记上再加一个窗口（infobubble）我认为这很容易，但是，你知道…… 谢谢 var side_bar_html=”“； var gmarkers=[]； var-map=null；函数初始化（）{ //创建地图变量myOptions={ 缩放：8，中心：新google.maps.LatLng（-27.421409，-61.936722）， mapTypeControl:true， mapTypeControlOpt

如何创建这样的信息泡沫
在这张地图上。这张地图很好用，我只需要在我的标记上再加一个窗口（infobubble）
我认为这很容易，但是，你知道……
谢谢

var side_bar_html=”“；
var gmarkers=[]；
var-map=null；
函数初始化（）{
//创建地图
变量myOptions={
缩放：8，
中心：新google.maps.LatLng（-27.421409，-61.936722），
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
map=new google.maps.map（document.getElementById（“map”），
肌肽）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//创建标记
//标记1
var point=new google.maps.LatLng（-27.421409，-61.936722）；
var marker=createMarker（点“Celta”、contentString0、Celta（）、非partshadow）
//marker2
var point=new google.maps.LatLng（-28.421409，-51.224562）；
var marker=createMarker（点“Celta2”、contentString1、Celta2（）、partShadow）
document.getElementById（“side\u bar”）.innerHTML=side\u bar\u html；
}
var infowindow=new google.maps.infowindow(
{ 
尺寸：新谷歌地图尺寸（150,50）
});
功能myclick（i）{
google.maps.event.trigger（gmarkers[i]，“点击”）；
}
函数createMarker（板条、标题、html、图标、阴影）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：图标，
标题:标题,，
影子：影子
});
google.maps.event.addListener（标记'click'，函数（）{
setContent（contentString）；
信息窗口。打开（地图、标记）；
});
G标记器。推（标记器）；
侧栏html+=''+name+'
'；
}

基于我的翻译版本的示例（这是您的代码的来源）

代码：


GoogleMapsJavaScriptAPI v3示例：添加可单击的侧栏
身体{
字体大小：83%；
}
正文，输入，文本区{
字体系列：arial，无衬线；
}
#地图{
宽度：600px；
高度：500px；
}
#样式，#添加选项卡{
浮动：左；
边缘顶部：10px；
宽度：400px；
}
#样式标签，
#添加选项卡标签{
显示：内联块；
宽度：130px；
}
.假冒{
背景：-webkit渐变（线性，左上，左下，颜色停止（0，rgb（112112）），颜色停止（0.51，rgb（94,94,94）），颜色停止（0.52，rgb（57,57,57））；
背景：moz线性梯度（中上，rgb（112112）0%，rgb（94,94,94）51%，rgb（57,57,57）52%）；
}
.phoneytext{
文本阴影：0-1px0#000；
颜色：#fff；
字体系列：Helvetica Neue、Helvetica、arial；
字号：18px；
线高：25px；
填充：4px45px 4px15px；
字体大小：粗体；
背景：url（../images/arrow.png）95%50%无重复；
}
.phoneytab{
文本阴影：0-1px0#000；
颜色：#fff；
字体系列：Helvetica Neue、Helvetica、arial；
字号：18px；
背景：rgb（112112）！重要；
}
//

您是否尝试过实施它？你遇到了什么麻烦？我试图添加一个代码infobubble，它从上面提到的链接中退出，但我的地图与我发现的示例不同。所以它没有起作用。我无法在这张地图上添加信息气泡。我还没有找到这个模型的参考资料，而且我的知识也不是很深。对不起，我的方式您张贴的代码不完整。它不会向地图添加任何标记（或者根本不包含地图…）确定。我编辑并添加了一些未定义的信息ContentString0、contentString1、celta和celta2。谢谢，它不像一个黑气泡，它像白色窗口上的标签。我还有一个例子：

<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>