He tardado un poco pero creo que ha merecido la pena.
Te decía para crear tres archivos. No obstante, he optado por hacerlo todo en uno (todo dentro una única función
window.onload = function () ) como lo estabas planteando.
Dado que era difícil controlar en qué punto estaba cada marcador (y en cada mapa había una coordenada de centrado y otra de posición del marcador), he optado por construir a mi estilo los tres mapas.
Verás que hay diferencias de código. Dejo a tu cargo el modificar lo que quieras.
Por otra parte, no he visto la ventana del tercer mapa, así que he puesto un texto aleatorio. (Y por las dudas, comprueba latitud y longitud de los puntos).
Ahí va el código completo:
Código Javascript
:
Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Tres mapas</title>
<link rel="shortcut icon" type="image/ico" href="http://www.digitaleando.com/imag/logo.ico" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=es"></script>
<script type="text/javascript">
window.onload = function () {
var latLng = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
var opciones = {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opciones);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
var contenido = '<div style="width:240px">Banana Beach, several 2 and 3 bedrooms, beach front apartments in a beautiful complex, sleeps 4-6 persons <a href="banana_beach_beachfront_apartment_marbella.htm">Link<\/a><\/div>';
var infowindow = new google.maps.InfoWindow({
content: contenido,
maxWidth: 320
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
// Segundo mapa
var latLng2 = new google.maps.LatLng(36.488661268293136, -4.986934661865234);
var opciones = {
center: latLng2,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), opciones);
var marker2 = new google.maps.Marker({
position: latLng2,
map: map2
});
var contenido2 = '<div style="width:240px">Dama de Noche, apartments 2, 3 and 4 bedrooms, near Puerto Banus and beach, sleeps 4-8 <a href="dama_de_noche_puerto_banus.htm">Link<\/a><\/div>';
var infowindow2 = new google.maps.InfoWindow({
content: contenido2,
maxWidth: 320
});
google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map2, marker2);
});
// Tercer mapa
var latLng3 = new google.maps.LatLng(36.502530170146976, -4.951658248901367);
var opciones = {
center: latLng3,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map3 = new google.maps.Map(document.getElementById("map_canvas3"), opciones);
var marker3 = new google.maps.Marker({
position: latLng3,
map: map3
});
var contenido3 = '<div style="width:240px">El contenido de tu tercera ventana<a href="#">Link<\/a><\/div>';
var infowindow3 = new google.maps.InfoWindow({
content: contenido3,
maxWidth: 320
});
google.maps.event.addListener(marker3, 'click', function () {
infowindow3.open(map3, marker3);
});
}
</script>
</head>
<body><div id="map_canvas" style="width: 580px; height: 400px"></div>
<div id="map_canvas2" style="width: 580px; height: 400px"></div>
<div id="map_canvas3" style="width: 580px; height: 400px"></div>
</body>
</html>