Javascript 谷歌地图API V3-点击标记，以覆盖方式显示更多信息内容（如谷歌地图）_Javascript_Jquery_Google Maps_Google Maps Api 3

Javascript 谷歌地图API V3-点击标记，以覆盖方式显示更多信息内容（如谷歌地图）

javascript jquery google-maps google-maps-api-3

Javascript 谷歌地图API V3-点击标记，以覆盖方式显示更多信息内容（如谷歌地图）,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我们使用GoogleMapAPIv3在HTML容器中加载GoogleMap。我们有一个位置搜索表。提交后，我们将获得可用位置并在地图中设置标记。一旦标记加载，点击每个标记，我们需要显示标题、地址详细信息和设计，就像我们在谷歌地图上看到的一样。（在谷歌地图中-单击红色标记时，我们可以看到更多信息覆盖框，其中包含星星、方向、附近搜索、保存到地图等其他详细信息。）我们是否有内置的api函数来加载上面的覆盖框。或者我们没有像目前谷歌地图那样加载详细信息的功能当我在谷歌和地图文档中搜索时，我可以看到显

我们使用GoogleMapAPIv3在HTML容器中加载GoogleMap。我们有一个位置搜索表。提交后，我们将获得可用位置并在地图中设置标记。一旦标记加载，点击每个标记，我们需要显示标题、地址详细信息和设计，就像我们在谷歌地图上看到的一样。（在谷歌地图中-单击红色标记时，我们可以看到更多信息覆盖框，其中包含星星、方向、附近搜索、保存到地图等其他详细信息。）

我们是否有内置的api函数来加载上面的覆盖框。或者我们没有像目前谷歌地图那样加载详细信息的功能

当我在谷歌和地图文档中搜索时，我可以看到显示覆盖窗口和在框中写入内容的选项。但我没有看到按要求加载内容的选项

我粘贴了下面的代码以供参考

       var map = null;
       gmap_ready = function (){
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

函数fnLoadMarkers（）{
变量位置=[
['S Dakota'，43.834527，-103.564457,1]，
[Texas'，31.428663，-99.418947,2]，
[California'，36.668419，-120.249025,3]，
[Newyork'，43.197167，-76.743166,4]，
[Missouri'，38.410558，-92.73926,5]
];
设置标记（地图、位置）；
}
功能设置标记（地图、位置）{
var image='images/marker.gif'；
对于（变量i=0；i


}
如果有任何关于如何实现这些结果的提示，这将是有益的。另外，请指导，是否可以通过谷歌API V3
提前感谢,
问候
Srinivasan.C我不明白为什么您要从Google Maps API标记打开一个新窗口来访问Google Maps？
您不能通过URL在谷歌地图上添加信息窗口
我就是这样做的
<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html> 


//启动映射
函数初始化（数据）{
//为中心地图定位
var mylatng=new google.maps.LatLng（data.lng，data.lat）；
//地图选项
变量myOptions={
缩放：10，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.HYBRID
}; 
//启动映射
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//信息窗口元素
infowindow=new google.maps.infowindow（）；
//固定销
setPin（数据）；
} 
//显示位置
函数setPin（数据）{
var pinLatLng=新的google.maps.LatLng（data.lng，data.lat）；
var pinMarker=new google.maps.Marker（{
位置：pinLatLng，
地图：地图，
数据：数据
}); 
//侦听单击事件
google.maps.event.addListener（pinMarker，'click'，function（）{
setCenter（新的google.maps.LatLng（pinMarker.position.lat（），pinMarker.position.lng（））；
map.setZoom（18）；
onItemClick（事件、pinMarker）；
}); 
} 
//信息窗口触发功能
函数onItemClick（事件，pin）{
//创建内容
var contentString=pin.data.text+“
坐标：“+pin.data.lng+”，“+pin.data.lat；
//替换信息窗口的内容和位置
setContent（contentString）；
信息窗口设置位置（引脚位置）；
infowindow.open（地图）
} 
签出InfoBubble库..查看标准信息窗口@Srinivasan这有帮助吗？我想这篇文章说的是当你点击谷歌地图上的地图别针时，左边的边栏会滑出来。（ie maps.google.com不使用信息窗口）非常棒的朋友！：）
<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html>