Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Un solo infoWindows API Google Maps V3

Estas en el tema de Un solo infoWindows API Google Maps V3 en el foro de Frameworks JS en Foros del Web. Hola [email protected] del foro, necesito una vez más de su ayuda... en el siguiente ejemplo que les muestro a continuación se muestran 3 infowindows de ...
  #1 (permalink)  
Antiguo 05/10/2012, 10:33
Avatar de Swab  
Fecha de Ingreso: agosto-2008
Ubicación: Chiloé
Mensajes: 92
Antigüedad: 12 años, 2 meses
Puntos: 5
Un solo infoWindows API Google Maps V3

Hola [email protected] del foro, necesito una vez más de su ayuda... en el siguiente ejemplo que les muestro a continuación se muestran 3 infowindows de un ejemplo de google Maps. Lo que quiero hacer es que dentro de un While se aumente automáticamente marcador_1, marcador_2, marcador3_... etc... Marcadores que vienen de una Base de datos MySql.

Este es el código.

Código HTML:
Ver original
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <!-- A continuación incluyo la llamada a la API Google Maps-->
  3. <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
  4.  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  5.   <script type="text/javascript">
  6.     var map = null;
  7.     var infoWindow = null;
  8. //Función que cierra el infowindows
  9.   function closeInfoWindow() {
  10.         infoWindow.close();
  11.     }//Fin función closeInfoWindow
  12.    
  13. //Función que muestra información en el InfoWindows
  14. function openInfoWindow(marker, content) {
  15.     var markerLatLng = marker.getPosition();
  16.         infoWindow.setContent([
  17.             '<div id="VentanaInfo">',
  18.             'Las coordenadas del <b>',
  19.             content,
  20.             '</b> son:<br/>',
  21.             markerLatLng.lat(),
  22.             ', ',
  23.             markerLatLng.lng(),
  24.             '</div>'
  25.         ].join(''));
  26.         infoWindow.open(map, marker);
  27. }//Fin función openInfoWindow
  28.    
  29.     function initialize() {
  30.         var myLatlng = new google.maps.LatLng(-43.117027, -73.619099);
  31.         var myOptions = {
  32.           zoom: 15,
  33.           center: myLatlng,
  34.           mapTypeId: google.maps.MapTypeId.ROADMAP
  35.         }  
  36.  
  37.         //var map = new google.maps.Map(document.getElementById("map"), myOptions);
  38.         map = new google.maps.Map($("#map").get(0), myOptions);
  39.         infoWindow = new google.maps.InfoWindow();
  40.        
  41.         google.maps.event.addListener(map, 'click', function(){
  42.             closeInfoWindow(); 
  43.         });
  44.  
  45.  
  46.  
  47. //////////////////////////////////
  48. //  COMEINZO DE LOS MARCADORES  //
  49. //////////////////////////////////
  50.   var marcador_1 = new google.maps.Marker({
  51.             position: myLatlng,
  52.             draggable: false,
  53.             map: map
  54.         });
  55.        
  56.         google.maps.event.addListener(marcador_1, 'click', function(){
  57.             openInfoWindow(marcador_1, "Marcador");
  58.         }); // Fin primer marcador
  59.  
  60.         var marcador_2 = new google.maps.Marker({
  61.             position: new google.maps.LatLng(-43.118027, -73.619099),
  62.             draggable: false,
  63.             map: map
  64.         });
  65.        
  66.         google.maps.event.addListener(marcador_2, 'click', function() {
  67.             openInfoWindow(marcador_2, "Marcador");
  68.         });
  69.         // Fin segundo marcador
  70.         var marcador_3 = new google.maps.Marker({
  71.             position: new google.maps.LatLng(-43.117027, -73.617099),
  72.             draggable: false,
  73.             map: map
  74.         });
  75.        
  76.         google.maps.event.addListener(marcador_3, 'click', function() {
  77.             openInfoWindow(marcador_3, "Marcador 3");
  78.         }); // Fin Tercer  marcador
  79.        
  80. //////////////////////////
  81. //   FIN DE MARCADORES  //
  82. //////////////////////////
  83.  
  84.   }//Cierre de la función initialize()
  85.  $(document).ready(function() {
  86.         initialize();
  87.     });
  88.   </script>
  89.   <style type="text/css">
  90.   #VentanaInfo {
  91.       text-align:center;
  92.       width: 300;
  93.       height:100;
  94.       background-color:#E8F8FD;
  95.       border-radius: 15px;
  96.       }
  97.   </style>
  98. </head>
  99.   <body onLoad="initialize()">
  100.  
  101.   <div id="map">
  102.    </div>
  103. <link href="../css/estilo.css" rel="stylesheet" type="text/css" />
  104. <center><h2>Ejemplo de google maps un só InfoWindows</h2></center>
  105. </body>
  106. </html>

Porfavor les agradecería si me pueden orientar con algún ejemplo de cómo hacer esto, estoy bastante tiempo haciendo esto, pero no he podido.

Gracias...


Swab

Etiquetas: api, google, html, javascript, js, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:50.