[英]Multiple Marker InfoWindows in Javascript
I'm quite a noob when it comes to Javascript, but I'm trying out something for my website/school project. 关于Javascript,我还是个菜鸟,但是我正在为我的网站/学校项目尝试一些东西。
On a map I want to display 2 locations, with each a marker and an informationwindow of there own. 我想在地图上显示2个位置,每个位置都有一个标记和一个信息窗口。 1 shows my location + contact details, the second marker should display other details for a company.
1显示我的位置+联系人详细信息,第二个标记应显示公司的其他详细信息。
I've managed to get 2 markers in the map to display at the place I want to, but the next problem is giving each marker it's own InfoWindow. 我已经设法在地图上获得2个标记以显示在我想要的位置,但是下一个问题是为每个标记赋予它自己的InfoWindow。
var Rafael = new google.maps.LatLng(52.341949,6.682236); var Rafael = new google.maps.LatLng(52.341949,6.682236); var Aandagt = new google.maps.LatLng(52.341949,6.782236);
var Aandagt =新的google.maps.LatLng(52.341949,6.782236);
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(52.341949,6.682236),
streetViewControl: false,
zoomControl: false,
panControl: false,
scaleControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: Rafael,
map: map,
title:"Rafael"
});
var marker = new google.maps.Marker({
position: Aandagt,
map: map,
title:"Aandagt"
});
var infowindow = new google.maps.InfoWindow({
content: '<h9><a href="http://www.aandagt.nl">AANDAGT Reclame & Marketing</a></h9><h10><br /><br />Einsteinstraat 8b<br />7601 PR Almelo<br /><br />Telefoon (0546) 85 03 69<br />Fax (0546) 45 53 31<br /><br /><a href="mailto:info@aandagt.nl">info@aandagt.nl</a></h10>'
})
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(map,marker);
});
Any help or suggestion how to add and attach 2 InfoWindows, 1 for marker 'Rafael' and 1 for marker 'Aandagt' would be much appreciated. 对于如何添加和附加2个InfoWindows,1个用于标记“ Rafael”和1个用于标记“ Aandagt”的帮助或建议,将不胜感激。
To view my current map: http://www.imrafaelhi.nl/stageverslag/?page_id=266 要查看我当前的地图,请访问: http : //www.imrafaelhi.nl/stageverslag/?page_id=266
You have created 2 markers with different position values and an mouseover listener for the marker named Rafael. 您已经创建了2个具有不同位置值的标记和一个名为Rafael的标记的鼠标悬停侦听器。
I suggest you declare the markers as: marker1 and marker2. 我建议您将标记声明为:marker1和marker2。
Then create 2 contentstrings vars for each infowindow associated with each marker: content1, content2 然后为与每个标记关联的每个信息窗口创建2个contentstrings变量:content1,content2
Add a listener (mouseover) for each marker to show the content string. 为每个标记添加一个侦听器(鼠标悬停)以显示内容字符串。 Add a listener (mouseout) to close the infowindow associated with the marker.
添加一个侦听器(鼠标移出)以关闭与标记关联的信息窗口。
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
you can give id to every marker..and can access those markers with their ids: 您可以为每个标记提供ID。并可以使用其ID访问这些标记:
var marker = new google.maps.Marker({
position:mycenter,
title:infoName,
id: count++
// animation:google.maps.Animation.BOUNCE
});
if(marker.id == count) //get access to marker id value..
{
//do what you want..
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.