Plotting Multiple Markers on Google Maps

Question

I am retrieving latitude and longitude from MySQL database, and am using Google map to show the locations of the retrieved coordinates using marker, i am trying to do something like this:

void Page_Load:

int RowLength;
String[] lon = null;
String[] lat = null;
protected void Page_Load(object sender, EventArgs e)
        {

            using (MySql.Data.MySqlClient.MySqlConnection connection = new MySql.Data.MySqlClient.MySqlConnection("Server;Port;Database=DB;Uid=U;Pwd=P"))
            {
                connection.Open();
               MySql.Data.MySqlClient.MySqlCommand cmd = connection.CreateCommand();


               cmd.CommandText = "SELECT longitude,latitude FROM table";

               MySql.Data.MySqlClient.MySqlDataReader datr = cmd.ExecuteReader();

               lon = new string[datr.FieldCount];
               lat = new string[datr.FieldCount];


               rep_loc = new string[datr.FieldCount];
               RowLength = datr.FieldCount;

                while (datr.Read())
                {
                        lon[counter] = datr[0].ToString();
                        lat[counter] = datr[1].ToString();
                        counter++;
                }
                datr.Close();
                connection.Close();
            }
}

Javascript for Google map

<script type="text/javascript">
    var lon;
    var lat;
    var homeLatlng;
    var mapOptions;
    var map;
    var contentString;
    var infowindow;

    function initialize() {

//I AM STUCK OVER HERE! and Don't know how to set multiple markers with information window for each marker
for(var i=0;i<='<%=RowLength%>';i++){
        homeLatlng = new google.maps.LatLng('<%=lat[0]%>', '<%=lon[0]%>');//initial

            mapOptions = {
                zoom: 5,
                center: homeLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };



        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);


            marker = new google.maps.Marker({
                position: homeLatlng,
                map: map,
                url: "http://www.google.com",
            });

            contentString = '<div id="content" style="color:#000000;">' +
            'This is a test <br>' +
            '<a href="www.google.com"> google </a> <br>' +
            '</div>';



            infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker) });
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);




</script>

Any ideas?

Thanks

Answer 1

I've done this using the following code in javascript:

<script type="text/javascript">

    var lat = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(lat)%>;
var lon = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(lon)%>;

function initialize() {

        mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(lat[0],lon[0]),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        infowindow = new google.maps.InfoWindow();


        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


        var len = '<%=RowLength%>';
        for (i = 0; i <= len ; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat[i], lon[i]),
                map: map,
                url: "http://www.google.com",
            });
google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent("<div style='color:#000000';> Testing </div>");
                    infowindow.open(map, marker);
                }
            })(marker, i));


        }

    }

google.maps.event.addDomListener(window, 'load', initialize);


</script>