Google Maps API v3添加标记到地图

Question

I have got GoogleMaps (api v3) marker coordinates in a GridView in my asp.net site. I would like to show those markers in the map. The problem is the markers are top of each other. All marker is on the first markers coordinate. There are so more markers then I have got in the GridView (markers are draggable).

//.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;
        }
    }

Answer 1

update line "GMLatLng.push(new google.maps.LatLng(GMLat, GMLng));" to "GMLatLng.push(new google.maps.LatLng(lat, lng));"

Answer 2

Did you try?

for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            latlngbounds.extend(marker.position);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);