Jugando con la API de Google Maps (IX) – StreetView

Buenas,

Vimos en un mensaje anterior cómo configurar visualmente nuestro mapa de Google Maps. Antes de ver el StreetView quería comentar una cosa al respecto. En la documentación del API podemos observar la existencia de un método llamado setOptions que, como parámetro, recibe un objeto de tipo MapOptions. Por el nombre del método y el parámetro recibido podríamos pensar que no sería necesaria la creación de todo el mapa si queremos cambiar el comportamiento inicial del mapa. Pues bien, he realizado la prueba y no termina de funcionar como debe, así que daremos por válido lo que decía antes de que se debe de establecer todo en la creación. Podéis ver un ejemplo de lo comentado aquí, tenéis que hacer clic en “clic aquí”.

Y ahora, el StreetView

Bien, dicho ésto, vamos a ver el StreetView.

Cualquier mapa de Google Maps contiene la imagen de un hombrecito en la zona del zoom (ver imagen 1 al pie del mensaje) que arrastrándolo y soltándolo donde queramos, nos abre el StreetView. Fijaros que, en el momento de arrastrarlo, donde existe StreetView se colorea en azul (ver imagen 2 al pie del mensaje).

Este hombrecito es, como todo aspecto visual de un mapa de Google Maps, configurable en la creación del mapa. Estas propiedades las obvié en el mensaje anterior expresamente para poderlas explicar ahora. Por supuesto, pertenecen al objeto MapOptions.

• streetViewControl: booleano para mostrar o no el hombrecito.
• streetView: propiedad de tipo StreetViewPanorama que representa la panorámica StreetView que se mostrará al soltar el hombrecillo. Si no se define ninguna, se generará una predeterminada y se mostrará en el div del mapa. Os recomiendo una lectura de esta clase dado que aquí sólo veremos el constructor de la misma, el cual recibe dos parámetros, container que es dónde se mostrará (un div) y opts de tipo StreetViewPanoramaOptionsdel que veremos ahora sus propiedades:
  • addressControl: booleano para mostrar o ocultar el cartel con la dirección.
  • addressControlOptions: propiedad de tipo StreetViewAddressControlOptionscon las opciones de visualización del control de dirección.
    • position: propiedad de tipo ControlPosition para especificar dónde aparecerá el control. Por defecto TOP_LEFT.
    • style: string con la especificación CSS a aplicar al control de posición. Por ejemplo, {backgroundColor: ‘red’}.
  • enableCloseButton: booleano para mostrar o ocultar el botón de cierre de la ventana StreetView.
  • linksControl: booleano para mostrar o ocultar el control de desplazamiento por las calles.
  • navigationControl: booleano para mostrar o ocultar el control de navegación.
  • navigationControlOptions: propiedad de tipo NavigationControlOptionscon las opciones de visualización del control de navegación.
    • position: propiedad de tipo ControlPosition para especificar dónde aparecerá el control. Por defecto TOP_LEFT.
    • style: propiedad de tipo NavigationControlStyle para especificar el tipo de navegador.
  • position: propiedad de tipo LatLng donde se centrará el mapa.
  • pov: propiedad de tipo StreetViewPovpara especificar la orientación de la cámara (según ángulo, inclinación y zoom).
    • heading: numérico que expresa el ángulo en grados respecto al norte absoluto siendo el norte 0º, el este 90º, el sur 180º y el oeste 270.
    • pitch: numérico que expresa la inclinación de la cámara en grados respecto al vehículo de Street View y oscila entre 90º (arriba) y -90º (abajo).
    • zoom: numérico para indicar el nivel del zoom siendo el más lejano el 0.

En la imagen 3 podéis ver a qué se refiere cada una de las propiedades.

Desde Delphi

Vista la teoría, llega el momento de ponerlo en práctica.

Cuando creamos un mapa, tenemos dos opciones, especificar una panorámica o dejar que el objeto mapa cree una predeterminada. Con la primera opción, podremos controlar todo el aspecto visual del StreeView. En cambio, si dejamos que se cree la predeterminada, mediante los métodos del StreetViewPanorama sólo podremos controlar la longitud/latitud (método setPosition) y la orientación de la cámara (método setPov).

Una vez creado el mapa, sea de la forma que sea, podemos acceder a la panorámica del mismo gracias al método getStreetView de la clase Map. Así mismo, podríamos establecer una panorámica nueva mediante setStreetView.

En nuestro ejemplo, escogeremos la opción de personalizar el StreetView en la creación del mapa y mostrarlo en un div diferente al mapa, así podremos ver las diferentes alternativas que tenemos. Para ello, lo primero es modificar la pantalla para poder acceder a las opciones del StreetView (ver imagen 4 al pie del mensaje). Hay que tener presente que, si las coordenadas pasadas no tienen una referencia válida para StreetView, éste no aparecerá.

Lo primero que hay que hacer es adaptar nuestra función JavaScript para poder recibir la configuración del StreetView. Para ello añadiremos 8 nuevos parámetros. También se tiene que crear el objeto StreetViewPanorama con sus opciones. Y puestos a modificar, para no repetir código, crearemos funciones para la obtención de las diferentes constantes.

  function GetPosition(aPos) {
    switch (aPos) {
      case "BOTTOM": return google.maps.ControlPosition.BOTTOM; break;
      case "BOTTOM_LEFT": return google.maps.ControlPosition.BOTTOM_LEFT; break;
      case "BOTTOM_RIGHT": return google.maps.ControlPosition.BOTTOM_RIGHT; break;
      case "LEFT": return google.maps.ControlPosition.LEFT; break;
      case "RIGHT": return google.maps.ControlPosition.RIGHT; break;
      case "TOP": return google.maps.ControlPosition.TOP; break;
      case "TOP_LEFT": return google.maps.ControlPosition.TOP_LEFT; break;
      default: return google.maps.ControlPosition.TOP_RIGHT;
    }
  }

  function GetNavigationControl(aNav) {
    switch (aNav) {
      case "ANDROID": return google.maps.NavigationControlStyle.ANDROID; break;
      case "SMALL": return google.maps.NavigationControlStyle.SMALL; break;
      case "ZOOM_PAN": return google.maps.NavigationControlStyle.ZOOM_PAN; break;
      default: return google.maps.NavigationControlStyle.DEFAULT;
    }
  }

  function MenuStyle(aStyleMenu) {
    switch (aStyleMenu) {
      case "DROPDOWN_MENU": return google.maps.MapTypeControlStyle.DROPDOWN_MENU; break;
      case "HORIZONTAL_BAR": return google.maps.MapTypeControlStyle.HORIZONTAL_BAR; break;
      default: return google.maps.MapTypeControlStyle.DEFAULT;
    }
  }

  function MapType(aTMap) {
    switch (aTMap) {
      case "HYBRID": return google.maps.MapTypeId.HYBRID; break;
      case "ROADMAP": return google.maps.MapTypeId.ROADMAP; break;
      case "SATELLITE": return google.maps.MapTypeId.SATELLITE; break;
      default: return google.maps.MapTypeId.TERRAIN;
    }
  }

  function DoWeb(Lat,Lon,TMap,aZoom,ZClick,MoveMap,Keyb,Wheel,HideAll,ShowTM,
                 PosTM,StyleTM,ShowNav,PosNav,StyleNav,ShowScale,PosScale,
                 SV,DirecSV,PosDirecSV,CloseSV,LinksSV,NavSV,PosNavSV,StyleNavSV) {
    if (map != null) map.setStreetView(null);
    panorama = null;
    map = null;

    aTMap = MapType(TMap);
    aPosTM = GetPosition(PosTM);
    aStyleTM = MenuStyle(StyleTM);
    aPosNav = GetPosition(PosNav);
    aStyleNav = GetNavigationControl(StyleNav);
    aPosScale = GetPosition(PosScale);
    aPosDirecSV = GetPosition(PosDirecSV);
    aPosNavSV = GetPosition(PosNavSV);
    aStyleNavSV = GetNavigationControl(StyleNavSV);

    var latlng = new google.maps.LatLng(Lat,Lon); 

    var panoOpts = {
      addressControl: DirecSV,
      addressControlOptions: {position: aPosDirecSV},
      enableCloseButton: CloseSV,
      linksControl: LinksSV,
      navigationControl: NavSV,
      navigationControlOptions: {position: aPosNavSV, style:aStyleNavSV},
      position: latlng
    }

    panorama =
        new google.maps.StreetViewPanorama(document.getElementById("streetview"),
        panoOpts);

    var myOptions = {
      center: latlng,
      mapTypeId: aTMap,
      zoom: aZoom, 

      disableDoubleClickZoom: ZClick,
      draggable: MoveMap,
      keyboardShortcuts: Keyb,
      scrollwheel: Wheel, 

      mapTypeControl: ShowTM,
      mapTypeControlOptions: {position: aPosTM, style: aStyleTM},
      navigationControl: ShowNav,
      navigationControlOptions: {position: aPosNav, style: aStyleNav},
      scaleControl: ShowScale,
      scaleControlOptions: {position: aPosScale},

      streetViewControl: true,
      streetView: panorama
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

A nivel de código Delphi, lo único que tendremos que hacer es modificar la llamada a la función JavaScript pasándole los nuevos parámetros.

Si quisiéramos que la panorámica de StreetView se viera en el mismo div que el mapa, bastará con que cambiemos la línea de creación del panorama y pasarle de parámetro el div del mapa

panorama =
    new google.maps.StreetViewPanorama(document.getElementById("map_canvas"),
    panoOpts);

No obstante, con las pruebas que he realizado, sólo funciona correctamente la primera vez que se crea el mapa con la panorámica de StreetView personalizada. Si alguien hace pruebas y ve cómo arreglarlo, estaría agradecido que me lo comentara.

Más en próximos artículos.

[Show as slideshow]

Como siempre, podéis descargaros el programa demo desde aquí.

Nos leemos