none
Múltiplas marcas em Gmaps através de repeater e javascript RRS feed

  • Pergunta

  • Prezados colegas, fiz os seguintes códigos e só consigo fazer meu objetivo de forma manual, vejam os códigos e vocês entenderão.

    Vou resumir para ficar fácil de entender, este código 

                    "title": '<%# Eval("Name") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>',
                    "description": '<%# Eval("Description") %>'

    Não tem motivo, manualmente assim funciona e marca no mapa.

    {
    "title": "Alibaug",
    "lat": 18.641400,
    "lng": 72.872200,
    "description": "Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India."
    },
    {
    "title": "Mumbai",
    "lat": 18.964700,
    "lng": 72.825800,
    "description": "Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."
    },

    o código completo para entender (a única diferença dizer acima, é que usando o modo manual, tudo funciona, e usando um repetidor automático no Eval, não funciona)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
        <ItemTemplate>
                 {
                    "title": '<%# Eval("Name") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>',
                    "description": '<%# Eval("Description") %>'
                }
        </ItemTemplate>
        <SeparatorTemplate>
            ,
        </SeparatorTemplate>
        </asp:Repeater>
        ];
        </script>
        <script type="text/javascript">

            window.onload = function () {
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var infoWindow = new google.maps.InfoWindow();
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    var marker = new google.maps.Marker({
                        ,
                        map: map,
                        title: data.title
                    });
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
            }
        </script>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
        </form>
    </body>
    </html>


    Automática (que não está funcionando - que chama classe de Dados e faz a consulta no banco e traz exatamente os mesmos dados que estão expostos acima na forma manual:

    debuguei e está buscando tudo correto, estes mesmos dados acima, porém da forma automática, ou seja com:

                    "title": '<%# Eval("Name") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>',
                    "description": '<%# Eval("Description") %>'

    não traz nada no mapa, apenas tudo azul, diminuo o zoom por completo e não tem nada, só azul, vejam o código abaixo:


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
        <ItemTemplate>
                 {
                    "title": '<%# Eval("Name") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>',
                    "description": '<%# Eval("Description") %>'
                }
        </ItemTemplate> <SeparatorTemplate> , </SeparatorTemplate> </asp:Repeater> ]; </script> <script type="text/javascript"> window.onload = function () { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ , map: map, title: data.title }); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } } </script> <div id="dvMap" style="width: 500px; height: 500px"> </div> </form> </body> </html>


    Classe de Dados que são buscados

       public class ControleDados
        {
            private static string OdbcConnectionString = ("Driver={MySQL ODBC 5.2w Driver};server=127.0.0.1;uid=root;database=bd_teste;port=****;pwd=***");
    
            //MODULO PARA Multiple Marks
            public static System.Data.DataSet recuperarLoc()
            {
                OdbcConnection odbcconex = new OdbcConnection(OdbcConnectionString);
                odbcconex.Open();
                string db = "select * from cont.locations";
                OdbcCommand cmd = new OdbcCommand(db, odbcconex);
                OdbcDataAdapter da = new OdbcDataAdapter(cmd);
                DataSet ds = new DataSet();
                da.Fill(ds, "locations");
                odbcconex.Close();
                return ds;
            }


    aspx.cx:

    protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) {

               DataSet dsLoc = new DataSet();

                dsLoc = ControleDados.recuperarLoc();

                DataTable dt = dsLoc.Tables["locations"];
                rptMarkers.DataSource = dt;
                rptMarkers.DataBind(); }

    Não sei debugar no aspx no source da página do aspx no Visual Studio, eu até consigo marcar a linha e fica um ponto vermelho com uma bola branca no meio, porém quando rodo não mostra o debug do source do aspx, por isso não sei se na parte do javascript:


    Está recebendo os dados que busque no Controle Dados e passei via o rptMarkers. Alguém poderia me ajudar neste quesito?  Está tudo funcionando quando faó manualmente, então indica que o problema é exatamente neste código acima com "Eval", não sei se eu não soube usar adequadamente.

    Desde já obrigado.




    • Editado Angelo.Net terça-feira, 19 de março de 2013 14:36
    segunda-feira, 18 de março de 2013 21:16

Respostas

  • Amigos, eu descobri o problema.

    Eu me baseei nesse projeto/exemplo:
    http://www.aspsnippets.comwww.aspsnippets.com/Articles/ASPNet-Google-Maps-V3-with-Multiple-Markers-Database-Example.aspx

    a única diferença é que no meu uso mysql. Eu fiz o ajuste.

    Eu descobri o que estava errado, o problema, como vocês podem ver neste site de exemplo, é que no banco de dados foi utilizado tipo numérico (18,6) em latitude e longitude, e como não sei como depurar no Visual Studio direto no 
    aspx para ver se o javascript no Eval estava recebendo os valores corretamente, eu tinha de deduzir, fui no banco de dados e copiei a linha inteira e veio isto:

    os valores separados por vírgula da linha de um banco de dados:

    * 'Alibaug', 18.641400, 72.872200, 'Alibaug é uma cidade costeira e um conselho municipal no Distrito Raigad na região de Konkan de Maharashtra, na Índia.' *

    notem que os valores 18.641400, 72.872200, relacionada a longitude, latitude, respectivamente, não estão vindo com o apóstrofo, porque eles são numéricos,
    então eu mudei no banco de dados do tipo numérico para varchar (50), e copiei a linha, e trouxe:

    'Alibaug', '18 0,641400 ', '72 0,872200', 'Alibaug é uma cidade costeira e um conselho municipal no Distrito Raigad na região de Konkan de Maharashtra, na Índia. "

    tudo veio com apóstrofo, por isso, quando este valor vai para o Eval, ele tem que ir com o apóstrofo como se fosse uma string, então testei com a modificação no banco de numeric para varchar e funcionou, trouxe tudo automático.

    mas ainda tenho uma pergunta, por que no exemplo que citei acima do local, o autor usou o tipo numérico?
    Concordo que sempre relacionado a latitude e longitude virá em decimais, mas aparentemente Eval só aceita como string, não aceita tipo numérico.

    Eu descobri como fazer isso funcionar, agora eu quero saber como fazer a fim de ser mais comum e eficiente, pois o autor usou numérico, então existe qualquer razão para isso, no caso de eu ter que voltar para o tipo numérico, como adaptar javascript e eval para aceitar o tipo numérico?

    Desde já obrigado.


    • Editado Angelo.Net terça-feira, 19 de março de 2013 15:17
    • Marcado como Resposta Felipo Gonçalves terça-feira, 19 de março de 2013 16:14
    terça-feira, 19 de março de 2013 15:16