Añadir cuadro "como llegar" en la api 3 de google maps

[SirZoX]

Hola, pues estoy peleando con la api3 de gmaps a ver si consigo colocar el box que aparece cuando ponemos una ubicación en google maps. Es el mismo box que indica lo que has buscado (una empresa en este caso) y q luego muestra un icono de "como llegar" y otro de "guardar en favoritos"

Un ejemplo puede verse en esta página (no es spam, solo es a modo de ejemplo, espero que no sea un problema el enlace...)

He probado con los mapControl que vienen indicados en la api de google maps pero ninguno corresponde a esta "caja"

[yoyo_38tuzo]

Iniciado por SirZoX

Hola, pues estoy peleando con la api3 de gmaps a ver si consigo colocar el box que aparece cuando ponemos una ubicación en google maps. Es el mismo box que indica lo que has buscado (una empresa en este caso) y q luego muestra un icono de "como llegar" y otro de "guardar en favoritos"

Un ejemplo puede verse en esta página (no es spam, solo es a modo de ejemplo, espero que no sea un problema el enlace...)

He probado con los mapControl que vienen indicados en la api de google maps pero ninguno corresponde a esta "caja"

Me parece que tienes que checar el enlace de google maps que manejas, ya lo resolviste?
en el href de Google maps pon este link, solo cambia las coordenadas.

href="https://maps.google.com/maps?ll=48.149707,6.928661&z=9&t=m&hl=es-ES&gl=DE&mapclient=embed&"

[SirZoX]

Hola.

Gracias yoyo_38tuzo por la respuesta, pero no funciona tampoco así.
El mapa que yo cargo lleva una capa de personalización del propio mapa. Usando el código tal como me comentas trae un resultado en el que mi capa de personalización desaparece, y además tampoco me muestra el box con las opciones del "como llegar" y demás.

Yo cargo el mapa directamente sin un enlace, sino con un div "vacio" que luego google maps llena por sí mismo.

Código HTML:

<div id="map-frame"></div>
 

Y con JS luego cargo tanto la capa de personalización como el marcador y otras cosas.

Código Javascript:

function initialize() {
    var styles = [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}];
    var latlng = new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx  );
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        styles: styles
    };
 
    map = new google.maps.Map(document.getElementById('map-frame'), myOptions);
    
    //definimos las coordenadas del área
    var trmCoords = [
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx),
        new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx)
    ];
 
    //construimos el polígono
    var areaTRM = new google.maps.Polygon({
        paths: trmCoords,
        strokeColor: '#f8bf18',
        strokeOpacity: 0,
        fillColor: '#CF0D29',
        fillOpacity: 0.6
    });
 
    
    areaTRM.setMap(map);
 
 
    var marcador = new google.maps.Marker({                                         
        position: new google.maps.LatLng(xx.xxxxxxxx, xx.xxxxxxxxx   ),                                 
        //  
        map: map,
        icon: 'images/logo-map.png',
        animation: google.maps.Animation.DROP
    });
 
    
 
}
 
google.maps.event.addDomListener(window,'load', initialize);
 

[txemaarbulo]

Hola SirZoX:

A la vista del último comentario, lo que te falta es, en el modo más simple:

Código Javascript:

function calcRoute() {
  var modo;
  if (document.getElementById('coche').checked) {
    modo = google.maps.DirectionsTravelMode.DRIVING;
  } else if (document.getElementById('bicicleta').checked) {
    modo = google.maps.DirectionsTravelMode.BICYCLING;
  } else if (document.getElementById('apie').checked) {
    modo = google.maps.DirectionsTravelMode.WALKING;
  } else {
    alert('Escoja un modo de ruta');
  }
 
  var request = {
    origin: document.getElementById("from").value,
    destination: document.getElementById("to").value,
    travelMode: modo
  };
 
  directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('direcciones'));
      directionsDisplay.setDirections(response);
    } else {
      alert("No existen rutas entre ambos puntos");
    }
  });
}
 

Obviamente, y como verás, hay varios item que los recojo como ID que son origen, destino, modo de ruta,...

Que ellos estén dentro del mapa o fuera del mismo depende de estilos.

Algo más complejo pero creo que se parece es lo que tengo en la pestaña Crear Ruta

[SirZoX]

Buenas txemaarbulo.
La función que me has facilitado lo que haría es "dibujarme" en el mapa la ruta entre 'origin' y 'destination', pero yo en realidad no necesito dibujar la función, eso ya lo haría la propia api de gmaps.
Lo que necesito es poder colocar el box dichoso sobre el mapa, simplemente ponerlo, luego el visitante ya si quiere buscará cómo llegar usando el box o como quiera, pero el box debe aparecer (los clientes son caprichosos, demasiado a veces... )

[txemaarbulo]

Y son caprichosos los clientes.

Después tenemos que interpretarlos y al final .... no sabemos qué hacer.

Los expertos son los clientes.

"Quienes saben no hablan y quienes hablan no saben." Siempre habla el ciente.