Como llegar / Google Maps

[nikimoto]

Muy buenas amigos
Tengo un mapa que me esta dando mas problemas de los deseados, me explico
siempre que habia utilizado un mapa pues habia utilizado la opcion que te da google maps de implementar uno directamente en la web, pero esta vez al ser una pagina vertical y el mapa ocupar el 100% de la pantalla pues me daba problemas con la rueda del raton y el zoom del mapa, vamos que cuando ibas bajando por la pagina con el raton pues al llegar al mapa lo que hacia era aumentar el mapa y no seguia bajando, asi que buscando soluciones pues encontre que se podia utilizar la API de google maps y asi poder anular el zoom de la rueda del raton, pero entonces me encuentro con otro problema, no me sale la ventanita de "como llegar".
Bueno basicamente lo que necesito es poner el mapa con la ventanita de como llegar y con el zoom del raton anulado, como ya he dicho se como hacer ambas cosas pero si hago una no puedo la otra y viceversa, asi que si algien me pudiese ayudar pues se lo agradeecria mucho, me da igual hacerlo poniendo el mapa directamente o utilizando el API
Bueno aqui esta el link de como lo tengo de momento
http://www.restaurantenani.es/inicio
Venga, gracias de antemano

[fede5426]

Proba colocando la versión que tiene el "Cómo llegar", agregandole al iframe scrolling="no".

[nikimoto]

gracias fede por la respuesta pero no funciona
al final buscando mas en google he encontrado una opcion mediante javascript, desactivando la interactividad sobre el mapa mientras no se pulse en el
no es lo que queria, pero es lo mas parecido que he encontrado
aqui el codigo por si alguien lo necesita

Código Javascript:

<script>
        $( document ).ready(function() {
            $('#map_canvas').addClass('scrollof');
            $('#canvas').on('click', function() {
                $('#map_canvas').removeClass('scrollof');
            });
            $( "#map_canvas" ).mouseleave(function() {
                 $('#map_canvas').addClass('scrollof');
            });
 
        });
    </script>
 

y en el css hay que crear esta clase

Código CSS:

.scrollof{
    pointer-events: none;
}
 

y el html del mapa seria asi

Código HTML:

<section id="mapa">
    <div id="canvas">               
        <iframe id="map_canvas" src="https://www.google.com/maps/embed?pb......" width="100%" height="500" frameborder="0" style="border:0"> </iframe>
    </div>
</section>
 

bueno, gracias y si a alguien se le ocurre alguna otra opcion, siempre sera bienvenida

[txemaarbulo]

Hola nikimoto:

Teniendo en cuenta que trabajas con iframe, la solución es buena (ver mi nota final).

Lo establecido para anular el zoom de la rueda de mouse, cuando codificamos los mapas es scrollwheel: false

Código Javascript:

function cargar_mapa() {
    var myLatlng = new google.maps.LatLng(36.190020, -5.922480 );
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    }
    var map = new google.maps.Map(document.getElementById("mi_mapa"), myOptions);
}
 

Claro está que al trabajar con iframe, nos ahorramos la codificación del mapa pero tenemos que acudir a CSS y javascript sobre el iframe. No es mi estilo porquenos perdemos otras muchas funciones a desarrollar. Pero no cabe que es una forma páctica de presentar el mapa.

[nikimoto]

gracias txema
como ya dije al principio, lo de anular la rueda se como hacerlo utilizando el API de googlemaps, el problema me surge con este metodo porque no se como meterle la ventanita de "como llegar"
lo tengo actualmente con el iframe pues no encuentro solucion a lo de la ventanita con la API, pero si sabes como poder metersela, te lo agradeceria, pues aunque tal como lo tengo ahora esta mas o menos bien, ya es por cabezoneria, me gustaria saber si se puede hacer y como, claro esta
venga, gracias

[txemaarbulo]

Al trabajar en iframe estás sujeto al mismo.

Quiero suponer que quieres crear tus códigos en la misma pantalla (que el "cómo llegar" lo muestres en tu página).

Gogle maps Api se inventó el recurso <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> y transladarte a sus páginas

Yo te recomendaría comenzar por <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Ambos son V3 pero el primero supone y obliga a que (tú o en su caso el usuario) tenga una cuenta en Google.

Desde el segundo podrás construir tu "como llegar" sin saltar a la página de Google Maps.

Si tu caso es el segundo, revisa https://developers.google.com/maps/d...rections?hl=es