Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/05/2015, 08:27
educito_94
 
Fecha de Ingreso: noviembre-2014
Ubicación: Lima-Peru
Mensajes: 22
Antigüedad: 9 años, 5 meses
Puntos: 0
Pregunta mostrar puntos google maps api desde base de datos

Buenas compañeros, tengo una duda muuuy basica pero que se me esta haciendo complicada .
Tengo esta pagina asp, en donde busco y listo desde una base de datos ciertas direcciones con sus respectivas coordenadas x,y pero quisiera que al hacerle click en algún resultado este muestre un marcador en el mapa de google.

Código HTML:
<%@ Language=VBScript %> 

  <html> 
  <head> 
  <title>PRUEBA FIN</title> 
<!--      mapainicio-->
            <style>
        #mapa{
            width: 700px;
            height: 450px;
            float:left;
            background: white;
        }
        #infor{
            width: 700px;
            height: 450px;
            float:left;
        }
                .auto-style1 {
                    height: 26px;
                }
                .auto-style4 {
                    width: 90px;
                }
                .auto-style5 {
                    width: 98px;
                }
                .auto-style6 {
                    width: 100px;
                }
                .auto-style7 {
                    width: 103px;
                }
    </style>



<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>


<script>

    
    var marcadores_nuevos = [];

    
    function quitar_marcadores(lista) {
        for (i in lista) {
            lista[i].setMap(null);
        }
    }

    $(document).on("ready", function () {

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

        google.maps.event.addListener(mapa, "click", function (event) {
            var coordenadas = event.latLng.toString();
                 
            coordenadas = coordenadas.replace("(", "");
            coordenadas = coordenadas.replace(")", "");
            
            var lista = coordenadas.split(","); 
                
            var direccion = new google.maps.LatLng(lista[0], lista[1]); 
            
            var marcador = new google.maps.Marker({
                position: direccion,
                map: mapa, 
                animation: google.maps.Animation.DROP, 
                draggable: true
            });
            
            
                                                                                                                                                                                                          
            formulario.find("OUTPUT[NAME='LONGITUDE']").val(lista[0]);
            formulario.find("OUTPUT[NAME='LATITUDE']").val(lista[1]);
                                                                 


            
            
            marcadores_nuevos.push(marcador);  
     
            google.maps.event.addListener(marcador, "click", function () { 

            });  
     
             
            quitar_marcadores(marcadores_nuevos); 
             
            marcador.setMap(mapa); 

        });

    }); 
</script> 
<!--      mapafin--> 
  </head>  
      <!--mapainicio-->
       <div id="mapa">
        <h2> mapa</h2>
    </div>
    <div id="infor">

<!--mapafin-->
  <% 
   If Not Request.QueryString("Message") = "True" Then 
  %> 
   <p> 
    <FORM NAME="Buscar" METHOD="GET" ACTION="PruebaFin.asp"> 
     <table> 

	   </tr><tr>
   <td class="auto-style1"><font face="arial">Nombre Via:</td><td class="auto-style1"><INPUT TYPE="TEXT" NAME="via" size="30"></td> 
       </tr>  
   <tr>
   <td class="auto-style1"><font face="arial">Distrito:</td><td class="auto-style1"><INPUT TYPE="TEXT" NAME="dis" size="30"></td> 
       </tr>  
<tr>
   <td class="auto-style1"><font face="arial">Provincia:</td><td class="auto-style1"><INPUT TYPE="TEXT" NAME="pro" size="30"></td> 
       </tr>  
     </table>  
     
     </p>  
         
     <p>  
     <INPUT TYPE="HIDDEN" NAME="Message" VALUE="True">  
     <INPUT TYPE="SUBMIT" VALUE="Buscar" style="height: 35px; width: 80px">  
     </FORM> 
     </p> 

  <!--<% 
   Else 

      dim strTB1,  strCommand  
      strTB1 = Server.HTMLEncode(Request.QueryString("tit"))  
     
     
     strProvider = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Users\DISEÑO GRAFICO\Desktop\LIMABASE\VIALIMACOOR.mdb;"
                      
     Set objConn = server.createobject("ADODB.Connection")   
        
     objConn.Open strProvider                

               
     strCommand =  "select * FROM ViaLima where NOMBRE_VIA ='" & request.querystring("via")&"'" 
      
      
	  	          
     objConn.Execute strCommand  
         
     Response.Write("Resultado")   
                                        	 
	  
     End If 
        
                     
%>--> 
        <BR><BR>
<!-- tabla donde liste los marcadores agregados en BD --> 
 <center> <TABLE BORDER="2"> 
<!--<TD class="auto-style4"><B>UBIGEO</B></TD>-->
<TD class="auto-style5"><B>CATEG_VIA</B></TD>    
<TD class="auto-style6"><B>NOMBRE_VIA</B></TD>   
<TD class="auto-style6"><B>NOMBRE_ALT</B></TD>   
<TD class="auto-style7"><B>CUADRA</B></TD>       
<TD class="auto-style6"><B>URBANIZACI</B></TD>   
<TD class="auto-style7"><B>DISTRITO</B></TD>     
<TD class="auto-style6"><B>PROVINCIA</B></TD>    
<TD class="auto-style7"><B>DEPARTAMEN</B></TD>   
<!--<TD class="auto-style6"><B>PAIS</B></TD>  -->

<%  
Dim conexion, registros, basedatos, strTB12, strTB13, strTB14,strCommand1  

      
 strTB12 = Server.HTMLEncode(Request.QueryString("via"))       
 strTB13 = Server.HTMLEncode(Request.QueryString("dis"))       
 strTB14 = Server.HTMLEncode(Request.QueryString("pro"))       

 basedatos = "C:\Users\DISEÑO GRAFICO\Desktop\LIMABASE\VIALIMACOOR.mdb"
              
Set conexion = Server.CreateObject("ADODB.Connection")



conexion.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & basedatos & ";"


Set registros = conexion.Execute("SELECT * FROM ViaLima where ((NOMBRE_VIA) LIKE '" & request.querystring("via")&"%') and ((DISTRITO) LIKE'" & request.querystring("dis")&"%') and PROVINCIA='" & request.querystring("pro")&"'" )


Do While Not registros.EOF



%>

<TR>
<!--<TD class="auto-style4"><%= registros.Fields("UBIGEO").Value %></TD> -->
<TD class="auto-style5"><%= registros.Fields("CATEG_VIA").Value %></TD> 
<TD class="auto-style6"><%= registros.Fields("NOMBRE_VIA").Value %></TD>   
<TD class="auto-style6"><%= registros.Fields("NOMBRE_ALT").Value %></TD>   
<TD class="auto-style7"><%= registros.Fields("CUADRA").Value %></TD> 
<TD class="auto-style4"><%= registros.Fields("URBANIZACI").Value %></TD> 
<TD class="auto-style5"><%= registros.Fields("DISTRITO").Value %></TD> 
<TD class="auto-style6"><%= registros.Fields("PROVINCIA").Value %></TD>   
<TD class="auto-style7"><%= registros.Fields("DEPARTAMEN").Value %></TD> 
<!--<TD class="auto-style6"><%= registros.Fields("PAIS").Value %></TD>   -->
</TR>

<%
registros.MoveNext

Loop 



registros.Close

Set registros = Nothing

conexion.Close

Set conexion = Nothing



%> 

</TABLE> </center>
        
<BR><BR><BR><BR>        
        
           

	<!--<center>
        <a href="borrar.asp">Eliminar otro registro</a><br><br>
		<a href="index.html">Volver ala página de Inicio</a>
		
		
	</center>-->
	
  </font> 
  <body> 


  </body> 
  </html> 
Alguna ayuda :(