how to add locations(markers) on a google map from database..?

Question

I am creating a google map in order to display store locations of a brand across india...

i have stored the complete address, with latitude & longitude in my SQL server database...

here I am able to get the address from database and display in my web page, but i am stuck with, mapping the address on google map...

here i have kept a text box so that the user enters his state/city/any location name, and clicks search button, then i have to mark the corresponding store location on the map by a marker..

here's my code for googgle map...

<script type="text/javascript">
    var infowindow = null;
    function initialize() {
        //var centerMap = new google.maps.LatLng(13.040547,80.230805);
        var centerMap = new google.maps.LatLng(12.264864, 77.937012);
        var myOptions = {
            zoom: 7,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({ });
    }

    //var sites = '<%=TextBox1.Text%>'
    //alert(sites);
    //[
    //// ['Ambattur', 13.119438,80.148182, 4, 'Ambattur, Chennai, Tamil Nadu, India, 600031'],['Avadi', 13.124453,80.101662,   1, 'Avadi, Tamil Nadu, India, 600017'],  ['Jayanagar', 12.928945,77.590599, 1, 'Jayanagar, Bangalore, Karnataka, India,     560041'],['Indira Nagar', 12.973697,77.641325, 1, 'Indira Nagar, Bangalore, Karnataka, India, 560038'],['TamilNadu',     11.415418,78.662109, 1, 'TamilNadu, India, 600017']
    //];

    function setMarkers(map, markers) {
        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                icon: new google.maps.MarkerImage(
                'Images/R.png ',
                null, null, new google.maps.Point(0, 42)),
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>

here, i have sites variable, so that i can map my locations on a map,

but here i need to map them from database...

any help will be appreciated...

thanks shameer ali shaik

Answer 1

At a first glance, your code seems alright. but here is my Code which works perfectly fine for me may be it will helpful to you.

myLatlng = new google.maps.LatLng(32.54681317351514, 15.1171875);

map = new google.maps.Map(document.getElementById("gmap"), {mapTypeId: google.maps.MapTypeId.ROADMAP,zoom:2,center:myLatlng});

/* loop which plot the markers on the map*/
// record[i] holds lat&lang in this format'32.54681317351514, 15.1171875'

    var points=record[i].geo_location.split(',');
    marker = new google.maps.Marker({
                 position: new google.maps.LatLng(points[0],points[1]),
                 draggable: false,
                 map: map
                 });

Answer 2

Guruparan Giritharan..

As i have told in my question, I want to locate stores across india.. & the sore details will be stored in database.. Now, i am able to get the store details & mark their location on map by your code.. earlier it is working fine for pincode, in the sense if you provide pincode in your searchbox, it will retrieve the corresponding store details..

Now, as per my code, in my reply for your blog post, i am able to enter only string values in the textbox., here i need to implement it for numeric values(pincode) also,

here's my code of update panel and timer click event..

protected void UpdatePanel1_Load(object sender, EventArgs e)
    {
        //Linq is used to load the table to the code
        DataClassesDataContext data = new DataClassesDataContext();

        //Select all from the table
        //List<addressmap> lst = (from u in data.addressmaps select u).ToList();
        List<addressmap> lst = (from u in data.addressmaps where u.StoreLocation == TxtSearch.Text || u.StoreCity == TxtSearch.Text || u.StoreState == TxtSearch.Text || u.StoreCountry == TxtSearch.Text select u).ToList();


        //add the table contents to the javascript array so that new locations will be loaded
        foreach (addressmap item in lst)
        {
            ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "infoarray", "'" + item.StoreAddress.ToString() + "'");
            ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "lonarray", item.StoreLongitude.ToString());
            ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "latarray", item.StoreLatitude.ToString());
            ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "bounce", item.StoreBounce.ToString());
        }
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        //update the update panel every 10 seconds
        UpdatePanel1.Update();
    }

here in the select statement, i need for pincode also..

any help will be thankful..