1
私のasp.netサイトのGridViewにGoogleマップ（api v3）マーカー座標があります。これらのマーカーを地図に表示したいと思います。問題はマーカがお互いのトップです。すべてのマーカーは、最初のマーカー座標にあります。 GridViewにはマーカーがたくさんあります（マーカーはドラッグ可能です）。Google Maps API v3で地図にマーカーを追加
//.aspx
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=xyz"></script>
<script type="text/javascript">
//google maps API v3
//változók
var GMLat = '<%= Label_GMLat.Text %>';
var GMLng = '<%= Label_GMLng.Text %>';
var GMHirdetesID = [];
var GMLatLng = [];
var GMKep = [];
var GMTitle = [];
var GMIngatlanCim = [];
var GMSzoveg = [];
var Grid_Table = '';
var hirdetesid = '';
var lat = '';
var lng = '';
var kep = '';
var title = '';
var ingatlancim = '';
var szoveg = '';
var latlng_1 = new google.maps.LatLng(49, 17); //(GMLat, GMLng);
var marker_1_pos = latlng_1;
var map;
var marker_1;
var infowindow_1;
var infowindow_1_off = true;
//funkciók
//init
function initialize() {
var myOptions =
{
zoom: 8,
center: latlng_1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poistion: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE]
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL //ZOOM_PAN; SMALL; ANDROID
},
scaleControl: true,
disableDoubleClickZoom: true,
draggable: true,
streetViewControl: true,
draggableCursor: 'move'
}
//térkép
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Grid_Table = document.getElementById('<%= GridView1.ClientID %>');
//tömbök föltöltése
for (var row = 1; row < Grid_Table.rows.length; row++) {
for (var col = 0; col < Grid_Table.rows[row].cells.length; col++) {
if (col == 0) {
if (document.all)
hirdetesid = Grid_Table.rows[row].cells[col].innerText;
else
hirdetesid = Grid_Table.rows[row].cells[col].textContent;
}
if (col == 3) {
lat = '';
if (document.all)
lat = Grid_Table.rows[row].cells[col].innerText;
else
lat = Grid_Table.rows[row].cells[col].textContent;
}
if (col == 4) {
lng = '';
if (document.all)
lng = Grid_Table.rows[row].cells[col].innerText;
else
lng = Grid_Table.rows[row].cells[col].textContent;
}
if (col == 5) {
if (document.all)
ingatlancim = Grid_Table.rows[row].cells[col].innerText;
else
ingatlancim = Grid_Table.rows[row].cells[col].textContent;
}
if (col == 6) {
if (document.all)
title = Grid_Table.rows[row].cells[col].innerText;
else
title = Grid_Table.rows[row].cells[col].textContent;
}
if (col == 7) {
if (document.all)
szoveg = Grid_Table.rows[row].cells[col].innerText;
else
szoveg = Grid_Table.rows[row].cells[col].textContent;
}
if (col == 8) {
if (document.all)
kep = Grid_Table.rows[row].cells[col].innerText;
else
kep = Grid_Table.rows[row].cells[col].textContent;
}
GMHirdetesID.push(hirdetesid);
GMLatLng.push(new google.maps.LatLng(GMLat, GMLng));
GMKep.push(kep);
GMTitle.push(title);
GMIngatlanCim.push(ingatlancim);
GMSzoveg.push(szoveg);
}
//align(GMLatLng);
//markerek fölrakása
for (var i = 0; i <= GMHirdetesID.length; i++) {
marker = new google.maps.Marker({
map: map,
position: GMLatLng[i],
animation: google.maps.Animation.DROP,
draggable: true
});
(function (i, marker) {
google.maps.event.addListener(marker, 'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent("Message " + i);
//infowindow.SetSize(300, 200);
infowindow.open(map, marker);
});
/**/ google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker) });
})(i, marker);
}
}
// google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker) });
google.maps.event.addListener(map, 'click', function() { infowindow.close() });
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div style=" width: 1000px; margin-right: auto; margin-left: auto;">
Térkép:
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="HirdetesID" DataSourceID="SqlDataSource1" Width="1000px">
<Columns>
<asp:BoundField DataField="HirdetesID" HeaderText="HirdetesID" ReadOnly="True"
SortExpression="HirdetesID" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
<asp:BoundField DataField="Coord" HeaderText="Coord" SortExpression="Coord" />
<asp:BoundField HeaderText="Lat" SortExpression="Lat" NullDisplayText=" " />
<asp:BoundField HeaderText="Lng" SortExpression="Lng" NullDisplayText=" " />
<asp:BoundField DataField="IngatlanCim" HeaderText="IngatlanCim"
SortExpression="IngatlanCim" />
<asp:BoundField DataField="GoogleMapsTitle" HeaderText="GoogleMapsTitle"
SortExpression="GoogleMapsTitle" />
<asp:BoundField DataField="GoogleMapsSzoveg" HeaderText="GoogleMapsSzoveg"
SortExpression="GoogleMapsSzoveg" />
<asp:BoundField DataField="Prp_keputvonal_thumb"
HeaderText="Prp_keputvonal_thumb" SortExpression="Prp_keputvonal_thumb" >
</asp:BoundField>
</Columns>
<EditRowStyle Width="1000px" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PROPYTESZT_ConnectionString1 %>"
SelectCommand="SELECT tblGoogleMapsCoord.HirdetesID, tblGoogleMapsCoord.Email, tblGoogleMapsCoord.Coord, tblGoogleMapsCoord.IngatlanCim, tblGoogleMapsCoord.GoogleMapsTitle, tblGoogleMapsCoord.GoogleMapsSzoveg, Prp_kep.Prp_keputvonal_thumb FROM tblGoogleMapsCoord LEFT OUTER JOIN Prp_kep ON tblGoogleMapsCoord.HirdetesID = Prp_kep.Prp_hirdetes WHERE (Prp_kep.Prp_GoogleMapsKep = N'igen') OR (Prp_kep.Prp_GoogleMapsKep IS NULL)">
</asp:SqlDataSource>
<br />
<br />
</div>
<div id="map_canvas" style="width: 800px; height: 600px; margin-right: auto; margin-left: auto;"></div>
<div style="width: 800px; text-align: left; margin-right: auto; margin-left: auto;">
GMLat: <asp:Label ID="Label_GMLat" runat="server" Text="Label_GMLat"></asp:Label><br />
GMLng: <asp:Label ID="Label_GMLng" runat="server" Text="Label_GMLng"></asp:Label><br />
GMTitle: <asp:Label ID="Label_GMTitle" runat="server" Text="" Visible="True"></asp:Label><br />
GMIngatlanCim: <asp:Label ID="Label_GMIngatlanCim" runat="server" Text="" Visible="True"></asp:Label><br />
GMSzoveg: <asp:Label ID="Label_GMSzoveg" runat="server" Text="" Visible="True"></asp:Label><br />
GMLink: <asp:Label ID="Label_GMLink" runat="server" Text="" Visible="True"></asp:Label><br />
GMKep: <asp:Label ID="Label_GMKep" runat="server" Text="" Visible="True"></asp:Label><br />
MegjelenitesAdatok(error): <asp:Label ID="Label_MegjelenitesAdatok" runat="server" Text="" Visible="True"></asp:Label><br />
</div>
//.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
string HirdetesID = "";
string GMCoord = "";
string GMLat = "";
string GMLng = "";
int GMindex;
int test1;
/*GridView1 Lat és Lng oszlopainak feltöltése Coord oszlopa alapján*/
for (int i = 1; i < GridView1.Rows.Count; i++)
{
GMCoord = GridView1.Rows[i].Cells[2].Text;
GMCoord = GMCoord.Replace("(", "");
GMCoord = GMCoord.Replace(")", "");
GMLat = GMCoord;
GMLng = GMCoord;
GMindex = GMCoord.IndexOf(",");
test1 = GMLat.Length - GMindex;
GMLat = GMLat.Remove(GMindex, (GMLat.Length - GMindex));
GMLng = GMLng.Remove(0, GMindex+1);
GridView1.Rows[i].Cells[3].Text = GMLat;
GridView1.Rows[i].Cells[4].Text = GMLng;
}
}
詳細を教えてください。マーカーがすべて同じ場所にあり、異なる値を持つべきであるという問題はありますか？または、実際にはすべてのマーカーが同じ場所にあり、複数のマーカーを重ねて表示すると望ましくない表示ができますか？リンクや画像を含めることはできますか？ –
または：すべての作業を行うブラウザであるため、ブラウザではなくサーバーからコードを送信してください。またはリンクを投稿する。たとえば、 'Grid_Table'に有用な値を割り当てていないようです。 –
マーカーは異なる場所にある必要がありますが、同じ位置です。 4つのマーカーがあるはずですが、4つ以上のものがあります。 – user1269225