Quiero hacer un "directorio" de mapas, necesito mostrar más de 30 mapas diferentes en diferentes páginas. Para ello estoy utilizando el API de google maps, quiero hacer una función que contenga todos los mapas y dependiendo de la pagina llamar al mapa con un identificador sea la clase o id, cada una con diferentes coordenadas.
Esto es lo que tengo hasta el momento: El problema es que solo funciona con el primer mapa o sea mapa1 si quiero llamar el mapa2 en otra pagina me toca cambiar el lugar y poner la variable mapa2 primero si no no se muestra, alguna idea?
function initialize() {
var latitud1 = new google.maps.LatLng(39.630159,-84.175937);
var latitud2 = new google.maps.LatLng(33.677705,-117.852974);
var latitud3 = new google.maps.LatLng(51.520614,-0.121825);
var opcionesMapa1 = {
zoom: 5,
center: latitud1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var opcionesMapa2 = {
zoom: 5,
center: latitud2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var opcionesMapa3 = {
zoom: 5,
center: latitud3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapa1 = new google.maps.Map(document.getElementById('mapa1'), opcionesMapa1);
var mapa2 = new google.maps.Map(document.getElementById('mapa2'), opcionesMapa1);
var mapa3 = new google.maps.Map(document.getElementById('mapa3'), opcionesMapa1);
var marker1 = new google.maps.Marker({
position: latitud1,
map: mapa1,
title: 'Oficina 1'
});
var marker2 = new google.maps.Marker({
position: latitud2,
map: mapa2,
title: 'Oficina 2'
});
var marker3 = new google.maps.Marker({
position: latitud3,
map: mapa3,
title: 'Oficina 3'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Aqui seria una de la paginas como quisiera llamar el mapa: O sea esta pagina podría ser genérica otra pagina seria tendría una estructura "similar" pero estaría mapa2 pero no me sale no carga. mapa
</body>
<script src="https://maps.google.com/maps/api/js?libraries=adsense&sensor=false"></script>
<script src="main.js"></script>
</html>