Sri*_*san 9 javascript jquery google-maps google-maps-api-3
我们使用Google Map Api V3在HTML容器中加载谷歌地图.我们有一个位置搜索表单.提交后,我们将获取可用的位置并在地图中设置标记.加载标记后,点击每个标记我们需要显示标题,地址详细信息和设计,就像我们在谷歌地图中所拥有的那样.(在谷歌地图中 - 点击红色标记时,我们可以看到更多信息覆盖框,其中包含星星,路线,附近搜索,保存到地图,更多...等其他详细信息.
我们是否内置了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);
}
function fnLoadMarkers(){
var locations = [
['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]
];
setMarkers(map,locations);
}
function setMarkers(map, locations) {
var image = 'images/marker.gif';
for (var i = 0; i < locations.length; i++) {
var currLocation = locations[i];
var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image,
title: currLocation[0],
zIndex: currLocation[3]
});
google.maps.event.addListener(marker, 'click', function() {
var latitude = this.position.lat();
var longitude = this.position.lng();
window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A");
});
}
}
如果有任何关于如何实现这些结果的提示,将会有所帮助.另外,请指导,是否可以通过Google API V3.
提前致谢,
问候
Srinivasan.C
tra*_*lad 22
我不明白您为什么要从Google Maps API标记打开Google地图的新窗口？您无法通过网址在Google地图上添加信息窗口.
我就是这样做的.
<!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>
| 归档时间： |
|
| 查看次数： |
33444 次 |
| 最近记录： |