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.
