Cargar puntos en mapa google sin tener que recargar la página

kinorro · #1 (**permalink**) 16/06/2013, 10:05

Hola. Quisiera que alguien me ayudase con un problema que he de resolver con Javascript. Necesito realizar varios mapas (rutas) con diferentes puntos de interes dentro del mapa. El tema es que se necesita mediante un menú visualizar las distintas rutas sin que se tenga que cargar la página en cada cambio. Sería esto posible.

Pongo aquí mi código:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <title>Rutas</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        
        <script type="text/javascript">
           function initialize() {
                
                var latlng = new google.maps.LatLng(40.416775, -3.703790);
                
                var settings = {
                    zoom: 16,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                
                var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
        
                var companyImage = new google.maps.MarkerImage('images/iconobodasyfiestaCLIENTES.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(50,50)
                    );
 
                var companyPos = new google.maps.LatLng(40.416775, -3.703790);
 
                var companyMarker = new google.maps.Marker({
                    position: companyPos,
                    map: map,
                    icon: companyImage,
                    title:"Sólo descripción. Quedamos en que no habría ni fotos ni enlaces...",
                    zIndex: 3}
                    );
                
 
                google.maps.event.addListener(companyMarker, 'click', function() {
                    infowindow.open(map,companyMarker);
                });
            }
        </script>
 
    </head>
    
    <body onload="initialize()">
        <br><br><br>
        <div align="center">
            <ul>
                <li><a href="#menumap">RUTA 1</a></li>
                <li><a href="#menuv">RUTA 2</a></li>
                <li><a href="#menuv">RUTA 3</a></li>
            </ul>
        </div>
        <div align="center">
            <div>
                <div id="map_canvas" style="width:800px; height:450px; top:110px; left:-97px;"></div>
            </div>  
        </div>
    
    </body>
</html>

Saludos y gracias