简体   繁体   中英

Creating markers in Google Maps, but only showing last marker

I am calling a JavaScript function within a loop in C#. Each call sends the description, the longitude and the latitude to the function. The function creates an individual marker within a map. What I would like to see are all of the markers whose corresponding information is sent in the loop. What I am seeing is the marker for the last item that had been sent.

C# code

        protected void MapButton_Click(object sender, EventArgs e)
    {
        ///////////////////////////////////////////////
        // Get all Games that are being played today //
        // then send HomeTeam, AwayTeam and          //
        // Coordinates to MapIt.                     //
        ///////////////////////////////////////////////

        ///////////////////////////////////////////////
        // Step 1: Call Stored Procedure that will   //
        //         return the TeamNames and          //
        //         Coordinates where the games will  //
        //         be played today.                  //
        ///////////////////////////////////////////////
        string strcon = WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(strcon))
        {
            SqlCommand cmd = new SqlCommand("GameDayCoordinates", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            conn.Open();
            DataTable MapItTbl = new DataTable();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(MapItTbl);
            ///////////////////////////////////////////////
            // Step 2: Send each set of Teams and        //
            //         Coordinates to MapIt. Within a    //
            //         loop.                             //
            // Send the Google Map Coordinates, and this //
            // function will mark the places on Google   //
            // Maps via a JavaScript function.           //
            ///////////////////////////////////////////////

            int count = MapItTbl.Rows.Count;
            string[] splitSeparator = new string[] { ", ",", "};
            LocObject[] LocationInfo = new LocObject[count];

            for (int i = 0; i < MapItTbl.Rows.Count; i++)
            {
                DataRow row = MapItTbl.Rows[i];
                string Coordinates = row["Coordinate"].ToString();
                if (Coordinates != "NULL") {
                    string[] strArr = Coordinates.Split(splitSeparator, StringSplitOptions.None);
                    ScriptManager.RegisterStartupScript((Page)this, base.GetType(), i + "GMaps" + DateTime.UtcNow, string.Format("GameMap('{0}','{1}','{2}','{3}');", row.ItemArray.GetValue(0).ToString(), strArr[0], strArr[1], i), true);
                }
            }
        }
    }

The called JavaScript function

            function GameMap(description, lat, lng, index) {

            var marker = new Array();
            var i;
            var max = 100;
            var myLatLng = { lat: 32.787407, lng: -82.269194 };
            var MapObj;
            MapObj = document.getElementById('map1');

            var map1 = new google.maps.Map(MapObj, {
                zoom: 7,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            });

            var GameLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            document.write(description);
            document.write(index);

            marker = new google.maps.Marker({
                position: GameLatlng,
                title: description
            });

            //for (i = 0; i < 8; i++) {
            marker.setMap(map1);
            //}
        }

How do I get all of the markers (as opposed to just the last marker) to show up?

See comments after "Good poing....Thanks!"

    <script type="text/javascript">

    var map;
        function initMap() {

            var myLatLng = { lat: 32.787407, lng: -83.269194 };

            map = new google.maps.Map(document.getElementById('map1'), {
                zoom: 7,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            });

            //var marker = new google.maps.Marker({
            //    position: myLatLng,
            //    map: map
            //});
        }



        function GameMap(description, Lat, Lng) {

            var GameLatlng = new google.maps.LatLng(Lat, Lng);

            var marker = new google.maps.Marker({
                position: GameLatlng,
                title: description, 
                map: map
            });

            document.write(description);
            document.write(" * ");
            document.write(Lat);
            document.write(" * ");
            document.write(Lng);
            document.write("<br>");
        }

</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM