Google Maps API v3 с добавлением нескольких маркеров с информационными окнами и пользовательским текстом
Я делаю сайт о велосипедистах, убитых в Норвегии. Для моего проекта я использую Google Maps API v3, но у меня есть смутное знакомство с Javascript. Вы можете увидеть мой результат здесь:http://salamatstudios.com/googlemapstest/
В основном я хочу иметь несколько маркеров с информационными окнами на каждом. Каждое из информационных окон будет содержать: Имя (возраст), Место, Дата смерти, Подробнее (которые будут связаны со страницей на самом сайте).
Как этот пример здесь:http://salamatstudios.com/bicycles/
Я пытался работать только с одним маркером и информационным окном, и это работало просто отлично. Когда я хочу добавить новые маркеры с пользовательскими информационными окнами на каждом, я застреваю. На данный момент у меня есть 3 маркера в разных местах, как видно из первой ссылки, но ни одно из информационных окон не появляется, когда я нажимаю на маркер.
Как мне обойти это, чтобы закодировать это, чтобы появились информационные окна? И как я могу иметь пользовательский текст в каждом информационном окне? Я собираюсь иметь около 30-40 маркеров на карте, когда это будет сделано. Все информационные окна будут иметь разные типы информации.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// MAP CONTROLS (START)
mapTypeControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// MAP CONTROLS (END)
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// -------------- MARKER 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(59.96384, 11.04120),
map: map,
icon: 'img/bike5.png'
});
// MARKER 1'S INFO WINDOW
var infowindow1 = new google.maps.InfoWindow({
content: 'Name<br>Location<br>Date<br><br><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
// -------- END OF 1st MARKER
// -------------- MARKER 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(60.63040, 8.56102),
map: map,
icon: 'img/bike5.png'
});
// MARKER 2'S INFO WINDOW
var infowindow2 = new google.maps.InfoWindow({
content: 'Name<br>Location<br>Date<br><br><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker2, 'click', function() {
// Calling the open method of the infoWindow
infowindow2.open(map, marker);
});
// -------- END OF 2nd MARKER
// -------------- MARKER 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(60.39126, 5.32205),
map: map,
icon: 'img/bike5.png'
});
// MARKER 3'S INFO WINDOW
var infowindow3 = new google.maps.InfoWindow({
content: 'Name<br>Location<br>Date<br><br><a href="http://www.db.no" target="_blank">Read more(test link)</a>'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker3, 'click', function() {
// Calling the open method of the infoWindow
infowindow3.open(map, marker);
});
// -------- END OF 3rd MARKER
}
google.maps.event.addDomListener(window, 'load', initialize);
Было бы здорово, если бы некоторые могли дать мне подсказку. Я'Я попытался немного поискать, но я могуне могу найти мой ответ. Заранее спасибо! :-)