Hi I have a repeater to show the data and has another repeater for google mapMy map will show 10 markers Now i need to highlight the first marker when hovering the first result in the repeater and so on Here is my codeltdiv id34dvMap34gt ltdivgt ltscript type34textjavascript34gt Generate Markers Value Array var markers ltaspRepeater ID34rptMarkers34 runat34server34gt ltItemTemplategt

This wayHTML lthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltstyle type34textcss34gt body fontfamily Arial fontsize 10pt table border 1px solid ccc table th backgroundcolor F7F7F7 color 333 fontweight bold table th table td padding 5px bordercolor ccc ltstylegtltheadgtltbodygt ltform id34form134 runat34server34gt ltscript type34textjavascript34 src34httpmapsgoogleapiscommapsapijssensorfalse34gtltscriptgt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt var googlemarke

Display Google Maps V3 marker on button click in ASP.Net

bebins

SOLVED CLOSED ACTIVE ANSWERED
User: bebins
Posted: on Jan 22, 2014 10:23 PM
Forum: Social Networking
Answer: 1
Views: 6528

Hi ,

I have a repeater to show the data and has another repeater for google map.My map will show 10 markers .Now i need to highlight the first marker when hovering the first result in the repeater and so on Here is my code...

<div id="dvMap">

              </div>

 <script type="text/javascript">
   //Generate Markers Value Array
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
                {
                "title":'<%# Eval("Company") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>',
                "description": '<%# Eval("Company") %></br><%# Eval("StreetAddress") %></br><%# Eval("City") %>-<%# Eval("ZipCode") %></br><%# Eval("StateName") %> '
            }
    </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: 5,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

         var infoWindow = new google.maps.InfoWindow();

         for (i = 1; i <= markers.length; i++) {
             var letter = String.fromCharCode("A".charCodeAt(0) + i - 1);
             var data = markers[i - 1]
             var myLatlng = new google.maps.LatLng(data.lat, data.lng);

             var marker = new google.maps.Marker({
                 position: myLatlng,
                 map: map,
                 title: data.title,
                 icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
             });

            

             (function (marker, data) {
                 google.maps.event.addListener(marker, "click", function (e) {
                     infoWindow.setContent(data.description);
                     infoWindow.open(map, marker);
                 });
             })(marker, data);
         }
     }

</script>

 <div class="recent-list" id="side-bar">
Here i am binding repeater control
</div>

My Code behind file

PagedDataSource pageds = new PagedDataSource(); pageds.DataSource = dt.DefaultView; pageds.AllowPaging = true; pageds.PageSize = 10;

rptMarkers.DataSource = pageds;
                rptMarkers.DataBind();

How to achieve my task...

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Jan 24, 2014 11:54 PM
Report

This way

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
</head>
<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("Name") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>',
                "description": '<%# Eval("Description") %>'
            }
    </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: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            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 marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (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: 500px; height: 500px">
                </div>
            </td>
            <td valign = "top" style = "padding-left:20px">
                <asp:Repeater ID="rptMarkers2" runat="server">
                    <HeaderTemplate>
                        <table id = "lstLocations" border="0" cellpadding="5" cellspacing="0">
                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Latitude
                                </th>
                                <th>
                                    Longitude
                                </th>
                                <th>
                                    Description
                                </th>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblLatitude" runat="server" Text='<%# Eval("Latitude") %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblLongitude" runat="server" Text='<%# Eval("Longitude") %>' />
                            </td>
                            <td>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Namespaces

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = this.GetData("select * from Locations");
            rptMarkers.DataSource = dt;
            rptMarkers.DataBind();
            rptMarkers2.DataSource = dt;
            rptMarkers2.DataBind();
        }
    }

    private DataTable GetData(string query)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;

                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display Google Maps V3 marker on button click in ASP.Net

Company

Explore

Follow us

Contact Us