{"id":75,"date":"2010-10-19T17:40:37","date_gmt":"2010-10-19T15:40:37","guid":{"rendered":"http:\/\/www.cadetill.com\/?p=75"},"modified":"2015-11-19T09:29:32","modified_gmt":"2015-11-19T08:29:32","slug":"jugando-con-la-api-de-google-maps-ix-%e2%80%93-streetview","status":"publish","type":"post","link":"https:\/\/www.cadetill.com\/en\/jugando-con-la-api-de-google-maps-ix-%e2%80%93-streetview\/","title":{"rendered":"Jugando con la API de Google Maps (IX) \u2013 StreetView"},"content":{"rendered":"Buenas,<\/p>\n<p>Vimos en un mensaje anterior c\u00f3mo <a title=\"Jugando con la API de Google Maps (VIII) \u2013 personalizar el mapa\" href=\"http:\/\/www.cadetill.com\/?p=73\" target=\"_blank\">configurar visualmente<\/a> nuestro mapa de Google Maps. Antes de ver el StreetView quer\u00eda comentar una cosa al respecto. En la <a title=\"Clase Map de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#Map\" target=\"_blank\">documentaci\u00f3n del API<\/a> podemos observar la existencia de un m\u00e9todo llamado <em>setOptions<\/em> que, como par\u00e1metro, recibe un objeto de tipo <em>MapOptions<\/em>. Por el nombre del m\u00e9todo y el par\u00e1metro recibido podr\u00edamos pensar que no ser\u00eda necesaria la creaci\u00f3n 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\u00ed que daremos por v\u00e1lido lo que dec\u00eda antes de que se debe de establecer todo en la creaci\u00f3n. Pod\u00e9is ver un ejemplo de lo comentado <a title=\"Demo m\u00e9todo setOptions\" href=\"http:\/\/www.cadetill.com\/pruebas\/google_ix.html\" target=\"_blank\">aqu\u00ed<\/a>, ten\u00e9is que hacer clic en &#8220;clic aqu\u00ed&#8221;.<\/p>\n<h4>Y ahora, el StreetView<\/h4>\n<p>Bien, dicho \u00e9sto, vamos a ver el StreetView.<\/p>\n<p>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\u00e1ndolo y solt\u00e1ndolo 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).<\/p>\n<p>Este hombrecito es, como todo aspecto visual de un mapa de Google Maps, configurable en la creaci\u00f3n del mapa. Estas propiedades las obvi\u00e9 en el mensaje anterior expresamente para poderlas explicar ahora. Por supuesto, pertenecen al objeto <a title=\"Objeto MapOptions de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#MapOptions\" target=\"_blank\">MapOptions<\/a>.<\/p>\n<ul>\n<li><strong>streetViewControl<\/strong>: booleano para mostrar o no el hombrecito.<\/li>\n<li><strong>streetView<\/strong>: propiedad de tipo <a title=\"Clase StreetViewPanorama de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#StreetViewPanorama\" target=\"_blank\">StreetViewPanorama<\/a> que representa la panor\u00e1mica StreetView que se mostrar\u00e1 al soltar el hombrecillo. Si no se define ninguna, se generar\u00e1 una predeterminada y se mostrar\u00e1 en el div del mapa. Os recomiendo una lectura de esta clase dado que aqu\u00ed s\u00f3lo veremos el constructor de la misma, el cual recibe dos par\u00e1metros, <strong>container<\/strong> que es d\u00f3nde se mostrar\u00e1 (un <em>div<\/em>) y <strong>opts<\/strong> de tipo <a title=\"Objeto StreetViewPanoramaOptions de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#StreetViewPanoramaOptions\" target=\"_blank\">StreetViewPanoramaOptions<\/a>del que veremos ahora sus propiedades:\n<ul>\n<li><strong>addressControl<\/strong>: booleano para mostrar o ocultar el cartel con la direcci\u00f3n.<\/li>\n<li><strong>addressControlOptions<\/strong>: propiedad de tipo <a title=\"Objeto StreetViewAddressControlOptions de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#StreetViewAddressControlOptions\" target=\"_blank\">StreetViewAddressControlOptions<\/a>con las opciones de visualizaci\u00f3n del control de direcci\u00f3n.\n<ul>\n<li><strong>position<\/strong>: propiedad de tipo <a title=\"Clase ControlPosition de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#ControlPosition\" target=\"_blank\">ControlPosition<\/a> para especificar d\u00f3nde aparecer\u00e1 el control. Por defecto TOP_LEFT.<\/li>\n<li><strong>style<\/strong>: string con la especificaci\u00f3n CSS a aplicar al control de posici\u00f3n. Por ejemplo, {backgroundColor: &#8216;red&#8217;}.<\/li>\n<\/ul>\n<\/li>\n<li><strong>enableCloseButton<\/strong>: booleano para mostrar o ocultar el bot\u00f3n de cierre de la ventana StreetView.<\/li>\n<li><strong>linksControl<\/strong>: booleano para mostrar o ocultar el control de desplazamiento por las calles.<\/li>\n<li><strong>navigationControl<\/strong>: booleano para mostrar o ocultar el control de navegaci\u00f3n.<\/li>\n<li><strong>navigationControlOptions<\/strong>: propiedad de tipo <a title=\"Objeto NavigationControlOptions de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#NavigationControlOptions\" target=\"_blank\">NavigationControlOptions<\/a>con las opciones de visualizaci\u00f3n del control de navegaci\u00f3n.\n<ul>\n<li><strong>position<\/strong>: propiedad de tipo <a title=\"Clase ControlPosition de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#ControlPosition\" target=\"_blank\">ControlPosition<\/a> para especificar d\u00f3nde aparecer\u00e1 el control. Por defecto TOP_LEFT.<\/li>\n<li><strong>style<\/strong>: propiedad de tipo <a title=\"Clase NavigationControlStyle de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#NavigationControlStyle\" target=\"_blank\">NavigationControlStyle<\/a> para especificar el tipo de navegador.<\/li>\n<\/ul>\n<\/li>\n<li><strong>position<\/strong>: propiedad de tipo <a title=\"Clase LatLng del API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#LatLng\" target=\"_blank\">LatLng<\/a> donde se centrar\u00e1 el mapa.<\/li>\n<li><strong>pov<\/strong>: propiedad de tipo <a title=\"Objeto StreetViewPov de la API de Google Maps\" href=\"http:\/\/code.google.com\/intl\/es\/apis\/maps\/documentation\/javascript\/reference.html#StreetViewPov\" target=\"_blank\">StreetViewPov<\/a>para especificar la orientaci\u00f3n de la c\u00e1mara (seg\u00fan \u00e1ngulo, inclinaci\u00f3n y zoom).\n<ul>\n<li><strong>heading<\/strong>: num\u00e9rico que expresa el \u00e1ngulo en grados respecto al norte absoluto siendo el norte 0\u00ba, el este 90\u00ba, el sur 180\u00ba y el oeste 270.<\/li>\n<li><strong>pitch<\/strong>: num\u00e9rico que expresa la inclinaci\u00f3n de la c\u00e1mara en grados respecto al veh\u00edculo de Street View y oscila entre 90\u00ba (arriba) y -90\u00ba (abajo).<\/li>\n<li><strong>zoom<\/strong>: num\u00e9rico para indicar el nivel del zoom siendo el m\u00e1s lejano el 0.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>En la imagen 3 pod\u00e9is ver a qu\u00e9 se refiere cada una de las propiedades.<\/p>\n<h4>Desde Delphi<\/h4>\n<p>Vista la teor\u00eda, llega el momento de ponerlo en pr\u00e1ctica.<\/p>\n<p>Cuando creamos un mapa, tenemos dos opciones, especificar una panor\u00e1mica o dejar que el objeto mapa cree una predeterminada. Con la primera opci\u00f3n, podremos controlar todo el aspecto visual del StreeView. En cambio, si dejamos que se cree la predeterminada, mediante los m\u00e9todos del <strong>StreetViewPanorama<\/strong> s\u00f3lo podremos controlar la longitud\/latitud (m\u00e9todo <em>setPosition<\/em>) y la orientaci\u00f3n de la c\u00e1mara (m\u00e9todo <em>setPov<\/em>).<\/p>\n<p>Una vez creado el mapa, sea de la forma que sea, podemos acceder a la panor\u00e1mica del mismo gracias al m\u00e9todo <strong>getStreetView<\/strong> de la clase <strong>Map<\/strong>. As\u00ed mismo, podr\u00edamos establecer una panor\u00e1mica nueva mediante <strong>setStreetView<\/strong>.<\/p>\n<p>En nuestro ejemplo, escogeremos la opci\u00f3n de personalizar el StreetView en la creaci\u00f3n del mapa y mostrarlo en un div diferente al mapa, as\u00ed 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). <span style=\"text-decoration: underline;\">Hay que tener presente que, si las coordenadas pasadas no tienen una referencia v\u00e1lida para StreetView, \u00e9ste no aparecer\u00e1.<\/span><\/p>\n<p>Lo primero que hay que hacer es adaptar nuestra funci\u00f3n JavaScript para poder recibir la configuraci\u00f3n del StreetView. Para ello a\u00f1adiremos 8 nuevos par\u00e1metros. Tambi\u00e9n se tiene que crear el objeto StreetViewPanorama con sus opciones. Y puestos a modificar, para no repetir c\u00f3digo, crearemos funciones para la obtenci\u00f3n de las diferentes constantes.<\/p>\n<pre class=\"brush:js\">  function GetPosition(aPos) {\r\n    switch (aPos) {\r\n      case \"BOTTOM\": return google.maps.ControlPosition.BOTTOM; break;\r\n      case \"BOTTOM_LEFT\": return google.maps.ControlPosition.BOTTOM_LEFT; break;\r\n      case \"BOTTOM_RIGHT\": return google.maps.ControlPosition.BOTTOM_RIGHT; break;\r\n      case \"LEFT\": return google.maps.ControlPosition.LEFT; break;\r\n      case \"RIGHT\": return google.maps.ControlPosition.RIGHT; break;\r\n      case \"TOP\": return google.maps.ControlPosition.TOP; break;\r\n      case \"TOP_LEFT\": return google.maps.ControlPosition.TOP_LEFT; break;\r\n      default: return google.maps.ControlPosition.TOP_RIGHT;\r\n    }\r\n  }\r\n\r\n  function GetNavigationControl(aNav) {\r\n    switch (aNav) {\r\n      case \"ANDROID\": return google.maps.NavigationControlStyle.ANDROID; break;\r\n      case \"SMALL\": return google.maps.NavigationControlStyle.SMALL; break;\r\n      case \"ZOOM_PAN\": return google.maps.NavigationControlStyle.ZOOM_PAN; break;\r\n      default: return google.maps.NavigationControlStyle.DEFAULT;\r\n    }\r\n  }\r\n\r\n  function MenuStyle(aStyleMenu) {\r\n    switch (aStyleMenu) {\r\n      case \"DROPDOWN_MENU\": return google.maps.MapTypeControlStyle.DROPDOWN_MENU; break;\r\n      case \"HORIZONTAL_BAR\": return google.maps.MapTypeControlStyle.HORIZONTAL_BAR; break;\r\n      default: return google.maps.MapTypeControlStyle.DEFAULT;\r\n    }\r\n  }\r\n\r\n  function MapType(aTMap) {\r\n    switch (aTMap) {\r\n      case \"HYBRID\": return google.maps.MapTypeId.HYBRID; break;\r\n      case \"ROADMAP\": return google.maps.MapTypeId.ROADMAP; break;\r\n      case \"SATELLITE\": return google.maps.MapTypeId.SATELLITE; break;\r\n      default: return google.maps.MapTypeId.TERRAIN;\r\n    }\r\n  }\r\n\r\n  function DoWeb(Lat,Lon,TMap,aZoom,ZClick,MoveMap,Keyb,Wheel,HideAll,ShowTM,\r\n                 PosTM,StyleTM,ShowNav,PosNav,StyleNav,ShowScale,PosScale,\r\n                 SV,DirecSV,PosDirecSV,CloseSV,LinksSV,NavSV,PosNavSV,StyleNavSV) {\r\n    if (map != null) map.setStreetView(null);\r\n    panorama = null;\r\n    map = null;\r\n\r\n    aTMap = MapType(TMap);\r\n    aPosTM = GetPosition(PosTM);\r\n    aStyleTM = MenuStyle(StyleTM);\r\n    aPosNav = GetPosition(PosNav);\r\n    aStyleNav = GetNavigationControl(StyleNav);\r\n    aPosScale = GetPosition(PosScale);\r\n    aPosDirecSV = GetPosition(PosDirecSV);\r\n    aPosNavSV = GetPosition(PosNavSV);\r\n    aStyleNavSV = GetNavigationControl(StyleNavSV);\r\n\r\n    var latlng = new google.maps.LatLng(Lat,Lon); \r\n\r\n    var panoOpts = {\r\n      addressControl: DirecSV,\r\n      addressControlOptions: {position: aPosDirecSV},\r\n      enableCloseButton: CloseSV,\r\n      linksControl: LinksSV,\r\n      navigationControl: NavSV,\r\n      navigationControlOptions: {position: aPosNavSV, style:aStyleNavSV},\r\n      position: latlng\r\n    }\r\n\r\n    panorama =\r\n        new google.maps.StreetViewPanorama(document.getElementById(\"streetview\"),\r\n        panoOpts);\r\n\r\n    var myOptions = {\r\n      center: latlng,\r\n      mapTypeId: aTMap,\r\n      zoom: aZoom, \r\n\r\n      disableDoubleClickZoom: ZClick,\r\n      draggable: MoveMap,\r\n      keyboardShortcuts: Keyb,\r\n      scrollwheel: Wheel, \r\n\r\n      mapTypeControl: ShowTM,\r\n      mapTypeControlOptions: {position: aPosTM, style: aStyleTM},\r\n      navigationControl: ShowNav,\r\n      navigationControlOptions: {position: aPosNav, style: aStyleNav},\r\n      scaleControl: ShowScale,\r\n      scaleControlOptions: {position: aPosScale},\r\n\r\n      streetViewControl: true,\r\n      streetView: panorama\r\n    };\r\n    map = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);\r\n  }<\/pre>\n<p>A nivel de c\u00f3digo Delphi, lo \u00fanico que tendremos que hacer es modificar la llamada a la funci\u00f3n JavaScript pas\u00e1ndole los nuevos par\u00e1metros.<\/p>\n<p>Si quisi\u00e9ramos que la panor\u00e1mica de StreetView se viera en el mismo div que el mapa, bastar\u00e1 con que cambiemos la l\u00ednea de creaci\u00f3n del panorama y pasarle de par\u00e1metro el div del mapa<\/p>\n<pre class=\"brush:js\">panorama =\r\n    new google.maps.StreetViewPanorama(document.getElementById(\"map_canvas\"),\r\n    panoOpts);<\/pre>\n<p>No obstante, con las pruebas que he realizado, s\u00f3lo funciona correctamente la primera vez que se crea el mapa con la panor\u00e1mica de StreetView personalizada. Si alguien hace pruebas y ve c\u00f3mo arreglarlo, estar\u00eda agradecido que me lo comentara.<\/p>\n<p>M\u00e1s en pr\u00f3ximos art\u00edculos.<\/p>\nngg_shortcode_1_placeholder\n<p>&nbsp;<\/p>\n<p>Como siempre, pod\u00e9is descargaros el programa demo desde <a title=\"Demo programa Google Maps, StreetView\" href=\"http:\/\/www.cadetill.com\/files\/googlemaps_parte_ix.rar\" target=\"_self\">aqu\u00ed<\/a>.<\/p>\n<p>Nos leemos","protected":false},"excerpt":{"rendered":"<p>Buenas, Vimos en un mensaje anterior c\u00f3mo configurar visualmente nuestro mapa de Google Maps. Antes de ver el StreetView quer\u00eda comentar una cosa al respecto. En la documentaci\u00f3n del API podemos observar la existencia de un m\u00e9todo llamado setOptions que, como par\u00e1metro, recibe un objeto de tipo MapOptions. Por el nombre del m\u00e9todo y el <a href='https:\/\/www.cadetill.com\/en\/jugando-con-la-api-de-google-maps-ix-%e2%80%93-streetview\/' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[9,74,10],"class_list":["post-75","post","type-post","status-publish","format-standard","hentry","category-delphi","tag-api","tag-delphi","tag-google-maps","category-5-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p13r0p-1d","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/posts\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":31,"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":2493,"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/posts\/75\/revisions\/2493"}],"wp:attachment":[{"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cadetill.com\/en\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}