Tema: Clausura (clousure) y/o Encapsulación
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 03/04/2011, 12:24
Avatar de abimaelrc
abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años
Puntos: 1517
Respuesta: Clausura (clousure) y/o Encapsulación
Gracias zero.

Gmaps no lo trabaja de esa forma, sino que tienes que declararlo. Para que me entiendas mejor, te posteo un ejemplo sencillo de Gmaps
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>test</title>
  6.     <style>
  7.     *{ margin: 0; padding: 0; }
  8.     html, body, #map{
  9.         width: 100%;
  10.         height: 100%;
  11.     }
  12.     </style>
  13.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  14.     <script type="text/javascript">
  15.     window.onload = function(){
  16.         var options = {
  17.             zoom: 9
  18.             , center: new google.maps.LatLng(18.2, -66.4)
  19.             , mapTypeId: google.maps.MapTypeId.ROADMAP
  20.         };
  21.  
  22.         var map = new google.maps.Map(document.getElementById('map'), options);
  23.  
  24.         var place = new Array();
  25.         place['San Juan'] = new google.maps.LatLng(18.465, -66.105);
  26.         place['Mayagüez'] = new google.maps.LatLng(18.215, -67.14);
  27.         place['Ponce'] = new google.maps.LatLng(18.025, -66.615);
  28.         place['Fajardo'] = new google.maps.LatLng(18.336, -65.65);
  29.         place['Culebras'] = new google.maps.LatLng(18.315, -65.3);
  30.         place['Vieques'] = new google.maps.LatLng(18.125, -65.44);
  31.  
  32.         for(var i in place){
  33.             var marker = new google.maps.Marker({
  34.                 position: place[i]
  35.                 , map: map
  36.                 , title: i
  37.             });
  38.  
  39.             google.maps.event.addListener(marker, 'click', function(){
  40.                 var popup = new google.maps.InfoWindow();
  41.                 popup.setContent('Lugar: ' + i);
  42.                 popup.open(map, marker);
  43.             })
  44.         }
  45.     };
  46.     </script>
  47. </head>
  48. <body>
  49.     <div id="map"></div>
  50. </body>
  51. </html>
De esta forma tiene un problema es que se muestra siempre el último seleccionado. Como todavía no me he puesto a observar con detenimiento el código de Panino, no sé como implementarlo, pero la forma más sencilla que vi como lograr que eso funcione correctamente es así
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>test</title>
  6.     <style>
  7.     *{ margin: 0; padding: 0; }
  8.     html, body, #map{
  9.         width: 100%;
  10.         height: 100%;
  11.     }
  12.     </style>
  13.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  14.     <script type="text/javascript">
  15.     window.onload = function(){
  16.         var options = {
  17.             zoom: 9
  18.             , center: new google.maps.LatLng(18.2, -66.4)
  19.             , mapTypeId: google.maps.MapTypeId.ROADMAP
  20.         };
  21.  
  22.         var map = new google.maps.Map(document.getElementById('map'), options);
  23.  
  24.         var place = new Array();
  25.         place['San Juan'] = new google.maps.LatLng(18.465, -66.105);
  26.         place['Mayagüez'] = new google.maps.LatLng(18.215, -67.14);
  27.         place['Ponce'] = new google.maps.LatLng(18.025, -66.615);
  28.         place['Fajardo'] = new google.maps.LatLng(18.336, -65.65);
  29.         place['Culebras'] = new google.maps.LatLng(18.315, -65.3);
  30.         place['Vieques'] = new google.maps.LatLng(18.125, -65.44);
  31.  
  32.         for(var i in place){
  33.             var marker = new google.maps.Marker({
  34.                 position: place[i]
  35.                 , map: map
  36.                 , title: i
  37.             });
  38.  
  39.             (function(i, marker){
  40.                 google.maps.event.addListener(marker, 'click', function(){
  41.                     var popup = new google.maps.InfoWindow();
  42.                     popup.setContent('Lugar: ' + i);
  43.                     popup.open(map, marker);
  44.                 })
  45.             })(i, marker);
  46.         }
  47.     };
  48.     </script>
  49. </head>
  50. <body>
  51.     <div id="map"></div>
  52. </body>
  53. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos