_mapas_infowindow

<!DOCTYPE html>
<head>
    <style>
        #mapa{
            width: 400px;
            height: 400px;
            float:left;
            background: green;
        }
        #infor{
            width: 400px;
            height: 400px;
            float:left;
        }
    </style>
<!--IMPORTANTE RESPETAR EL ORDEN -->
<!--ESTILOS DE BOOSTRAP -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" ></script>
<!--ARCHIVOS JAVASCRIPT DE BOOTSTRAP -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script>
    //VARIABLES GENERALES
        //declaras fuera del ready de jquery
    var nuevos_marcadores = [];
    var marcadores_bd= [];
    var mapa = null; //VARIABLE GENERAL PARA EL MAPA
    //FUNCION PARA QUITAR MARCADORES DE MAPA
    function limpiar_marcadores(lista)
    {
        for(i in lista)
        {
            //QUITAR MARCADOR DEL MAPA
            lista[i].setMap(null);
        }
    }
    $(document).on("ready", function(){

        //VARIABLE DE FORMULARIO
        var formulario = $("#formulario");

        var punto = new google.maps.LatLng(19.339027,-98.948541);
        var config = {
            zoom:8,
            center:punto,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        mapa = new google.maps.Map( $("#mapa")[0], config );

        var combo_asesorias = $("#combo_asesorias");
        $.ajax({
            type:"POST",
            url:"iajax.php",
            data:"&tipo=listar_asesorias",
            dataType:"JSON",
            success:function(d){
                combo_asesorias.html("");
                $.each(d.mensaje, function(i, item){
                    var campo = "<option value='"+item.Id_ase+"' >"+item.Nombre_ase+"</option>";
                    combo_asesorias.append(campo);
                })
            },
            beforeSend:function(){

            }

        });


        combo_asesorias.on("change", function(){
            var id = $(this).val();
            listar(id);
        })

    });
    function listar(id)
    {
       limpiar_marcadores(marcadores_bd);
       $.ajax({
               type:"POST",
               url:"iajax.php",
               dataType:"JSON",
               data:"&tipo=listar_puntos&id="+id,
               success:function(data){
                   if(data.estado=="ok")
                    {
                        $.each(data.mensaje, function(i, item){

                            //DECLARAR EL INFOWINDOW, Y DARLE EL CONTENIDO DEL
                            //CAMPO Direccion_AE DE LA BASE DE DATOS
                            var infowindow = new google.maps.InfoWindow({
                              content: item.Direccion_AE
                            });

                            var posi = new google.maps.LatLng(item.latitud, item.longitud);//bien
                            var marca = new google.maps.Marker({
                                position:posi,
                                infoWindow:infowindow
                            });

                            //AGREGAR EVENTO PARA ABRIR INFOWINDOW
                            //CADA VEZ QUE SE HACE CLIC EN EL MARCADOR
                          google.maps.event.addListener(marca, 'click', function() {
                            infowindow.open(mapa,marca);
                            mapa.panTo(marca.getPosition());
                          });

                          //COMENTAR LA LINEA DE ABAJO PARA QUE NO SALGAN
                          //LO INFOWINDOW ABIERTOS POR DEFECTO!
                          infowindow.open(mapa, marca);


                            marcadores_bd.push(marca);
                            marca.setMap(mapa);
                        });
                    }
                else
                    {
                        alert("NO hay puntos en la BD");
                    }
               },
               beforeSend:function(){

               },
               complete:function(){

               }
           });
    }
    //PLANTILLA AJAX

</script>
</head>
<body>
    <div id="mapa">
        <h2>Aquí irá el mapa!</h2>
    </div>
    <div id="infor">
        <select id="combo_asesorias">
            <option value="1" >Cargando...</option>
        </select>
    </div>
</body>
</html>