API do Google Maps v3 adicionando vários marcadores com janelas de informações com texto personalizado
Estou fazendo um site sobre ciclistas mortos na Noruega. Para meu projeto, tenho usado o google maps api v3, mas tenho uma familiaridade vaga com o javascript. Você pode ver o meu resultado até agora aqui:http://salamatstudios.com/googlemapstest/
Basicamente eu quero ter vários marcadores com informações em cada um. Cada uma das infowindows conterá: Nome (idade), Local, Data da morte, Leia mais (que será vinculado a uma página no próprio site).
Como este exemplo aqui:http://salamatstudios.com/bicycles/
Eu tentei trabalhar com apenas um marcador e infowindow e isso funcionou muito bem. Quando eu quero adicionar novos marcadores com janelas de informações personalizadas em cada um, fico preso. No momento, tenho três marcadores em locais diferentes, como visto no primeiro link, mas nenhuma janela de informações aparece quando clico no marcador.
Como faço para codificá-lo para que apareçam as infowindows? E como posso ter texto personalizado em todas as janelas? Eu vou ter cerca de 30-40 marcadores no mapa quando estiver pronto. Todas as janelas de informações terão diferentes tipos de informações.
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);
Seria ótimo se alguns pudessem me dar uma pista. Eu tentei pesquisar um pouco, mas não consigo encontrar minha resposta. Desde já, obrigado! :-)