Display Locations in GridView and Google Maps in ASP.Net

Last Reply on Apr 11, 2014 03:49 AM By Priyanka12

Posted on Apr 10, 2014 11:47 PM

There is 1 ASP.NET checkBox, 1 Button, 1 Gridview in my web page with GeoMap.

Requirement is:

When I check the "CheckBox", and click on "Button", ALL the locations(Latitude, Longitude also saved in DB) saved in DB should show inside "GeoMap" as well as in "GridView".

I had done it using "DropDown" (showing particular location NOT ALL) but finding difficulty using "CheckBox" (to show ALL location at once)

Please help me with any solution.


Please reply

Posted on Apr 11, 2014 03:49 AM

Tried Below code and its working now.

Thankyou.

<body>
<form id="form1" runat="server">

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    var google_markers = new Array();
    var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
    {
    "title": '<%# Eval("StationName") %>',
    "lat": '<%# Eval("Latitude") %>',
    "lng": '<%# Eval("Longitude") %>',
    "description": '<%# Eval("Address") %>',
    "type": '<%# Eval("Status") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
    ];
</script>

<script type="text/javascript">

    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
           // panControl:false,
            streetViewControl:false,
            mapTypeControl:true
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var icon = "";
            switch (data.type) {
            case "Danger":
                icon = "red";
                break;
            case "Normal":
                icon = "green";
                break;
            case "Warning":
                icon = "yellow";
                break;      
            case "No status":
                icon = "blue";
                break;      
            }
            icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                animation: google.maps.Animation.DROP,
                displayMode: 'markers',
                colorAxis: {colors: ['green', 'blue']},
                icon: new google.maps.MarkerImage(icon)
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            google_markers[google_markers.length] = marker;
        }
    }
    $("#lstLocations td").live("mouseover", function () {
        google.maps.event.trigger(google_markers[$(this).parent()[0].rowIndex - 1], 'click');
    });
    $("#lstLocations td").live("mouseover", function () {
    });
</script>

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
     <td>
         <div id="dvMap" style="width: 725px; height: 394px;"></div>
     </td>
      <td valign="top" class="auto-style3">

           <table style="height:400px; width: 99%;">
                            <tr>
                                <td style="text-align:center"><asp:Label runat="server" ID="LStations" Text="Station :"></asp:Label></td>
                            </tr>
                             <tr>
                                <td>Dam: <asp:CheckBox ID="ChKDam" runat="server" Text=""/></td>
                            </tr>
                             <tr>
                                <td>Water Level: <asp:CheckBox ID="ChkWater" runat="server" Text=""/></td>
                            </tr>
                             <tr>
                                <td><%--Pump station: <asp:CheckBox ID="ChkPump" runat="server" Text=""/>--%></td>
                            </tr>
                            <tr>
                                <td><asp:CheckBox ID="ChkAll" runat="server" Text="ALL"/></td>
                            </tr>
                            <tr>
                                <td style="text-align:center"><asp:Button ID="Bshow" runat="server" Text="Show" OnClick="Bshow_Click"/></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                        </table>

 </td>

 </tr>
</table>


</form>
</body>