Un solo infoWindows API Google Maps V3

Swab · #1 (**permalink**) 05/10/2012, 10:33

Hola Amig@s 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<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- A continuación incluyo la llamada a la API Google Maps-->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
  <script type="text/javascript">
    var map = null;
    var infoWindow = null;
//Función que cierra el infowindows
  function closeInfoWindow() {
        infoWindow.close();
    }//Fin función closeInfoWindow
    
//Función que muestra información en el InfoWindows 
function openInfoWindow(marker, content) {
    var markerLatLng = marker.getPosition();
        infoWindow.setContent([
            '<div id="VentanaInfo">',
            'Las coordenadas del <b>',
            content,
            '</b> son:<br/>',
            markerLatLng.lat(),
            ', ',
            markerLatLng.lng(),
            '</div>'
        ].join(''));
        infoWindow.open(map, marker);
}//Fin función openInfoWindow
    
    function initialize() {
        var myLatlng = new google.maps.LatLng(-43.117027, -73.619099);
        var myOptions = {
          zoom: 15,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }   
 
        //var map = new google.maps.Map(document.getElementById("map"), myOptions); 
        map = new google.maps.Map($("#map").get(0), myOptions);
        infoWindow = new google.maps.InfoWindow();
        
        google.maps.event.addListener(map, 'click', function(){
            closeInfoWindow();  
        });
 
 
 
//////////////////////////////////
//  COMEINZO DE LOS MARCADORES  //
//////////////////////////////////
  var marcador_1 = new google.maps.Marker({
            position: myLatlng,
            draggable: false,
            map: map
        });
        
        google.maps.event.addListener(marcador_1, 'click', function(){
            openInfoWindow(marcador_1, "Marcador");
        }); // Fin primer marcador
 
        var marcador_2 = new google.maps.Marker({
            position: new google.maps.LatLng(-43.118027, -73.619099),
            draggable: false,
            map: map
        });
        
        google.maps.event.addListener(marcador_2, 'click', function() {
            openInfoWindow(marcador_2, "Marcador");
        });
        // Fin segundo marcador
        var marcador_3 = new google.maps.Marker({
            position: new google.maps.LatLng(-43.117027, -73.617099),
            draggable: false,
            map: map
        });
        
        google.maps.event.addListener(marcador_3, 'click', function() {
            openInfoWindow(marcador_3, "Marcador 3");
        }); // Fin Tercer  marcador
        
//////////////////////////
//   FIN DE MARCADORES  //
//////////////////////////
  
  }//Cierre de la función initialize()
 $(document).ready(function() {
        initialize();
    });
  </script>
  <style type="text/css">
  #VentanaInfo {
      text-align:center;
      width: 300;
      height:100;
      background-color:#E8F8FD;
      border-radius: 15px;
      }
  </style>
</head>
  <body onLoad="initialize()">
  
  <div id="map">
   </div>
<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<center><h2>Ejemplo de google maps un só InfoWindows</h2></center>
</body>
</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