hello I have a problem with displaying maps in page load the map is displayed but when I want to execute the code on a button click the map is not displayedFunction javascriptfunction AfficherMap alert34ssss34 var mapOptions center new googlemapsLatLngmarkers0lat markers0lng zoom 10 mapTypeId googlemapsMapTypeIdROADMAP var map new googlemapsMapdocumentgetElementById34mapcanvas34 mapOptions var in

You need to put the map inside the Panel control and set it to visible false You need to set it visible true inside the Button Click eventPlease refer this codeRefShow Google Maps using Latitude and Longitude in ASPNetHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegtltheadgtltbodygt ltform id34form134 runat34server34gt ltscript type34textjavascript34 src34httpmapsgoogleapiscommapsapijssensorfalse34gtltscriptgt ltaspButton Text34Show Marker On Map34 OnClick34ShowMap34 runat34server34 gt lthr gt ltaspPanel runat34server34 ID34Panel134 Visible34false34gt ltscript type34textjavascript34gt var markers ltaspRepeater ID34rptMarkers34 runat34server34gt ltItemTemplategt 34title34 39lt E

Display Google maps from database on button click in ASP.Net

chouaib....

SOLVED CLOSED ACTIVE ANSWERED
User: chouaib.benyouba
Posted: on Nov 13, 2014 03:44 AM
Forum: Social Networking
Answer: 1
Views: 10259

hello I have a problem with displaying maps in page load the map is displayed, but when I want to execute the code on a button click the map is not displayed

Function javascript

function AfficherMap() {
    //     alert("ssss");
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var infoWindow = new google.maps.InfoWindow();
    var lat_lng = new Array();
    var latlngbounds = new google.maps.LatLngBounds();
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        lat_lng.push(myLatlng);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title
        });
        latlngbounds.extend(marker.position);
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
    /////////////////////////////////////////77777

    var service = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);

    var waypts = [];
    for (j = 1; j < lat_lng.length - 1; j++) {
        waypts.push({ location: lat_lng[j],
            stopover: true
        });
    }

    var request = {
        origin: lat_lng[0],
        destination: lat_lng[lat_lng.length - 1],
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    service.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        } else { alert("Directions request failed:" + status); }
    });
}

button Click

protected void Button3_Click(object sender, EventArgs e)
{
    string s = "2014-11-05";
    LocalisationVenteDao.ds.Reset();
    LocalisationVenteDao.Instance.LocalisationVenteToDB(Sql.Instance.GetSqlConnection(), s);
    rptMarkers.DataSource = LocalisationVenteDao.ds.Tables[0];
    GridView1.DataSource = LocalisationVenteDao.ds.Tables[0];
    rptMarkers.DataBind();
    GridView1.DataBind();
    ClientScript.RegisterStartupScript(this.GetType(), "blablaosef", "<script type='text/javascript'>AfficherMap();</script>");
}

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

Azim

0 1

Reply
ANSWER
User: Azim
Replied: on Nov 13, 2014 03:49 AM
Modified: on Nov 17, 2014 02:06 AM
Report

You need to put the map inside the Panel control and set it to visible false. You need to set it visible true inside the Button Click event.

Please refer this code

Ref:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <asp:Button Text="Show Marker On Map" OnClick="ShowMap" runat="server" />
    <hr />
    <asp:Panel runat="server" ID="Panel1" Visible="false">
        <script type="text/javascript">
    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);
                }
            }
        </script>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
    </asp:Panel>
    </form>
</body>
</html>

Namespaces

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

protected void ShowMap(object sender, EventArgs e)
{
    this.Panel1.Visible = true;
    DataTable dt = this.GetData("select * from Locations");
    rptMarkers.DataSource = dt;
    rptMarkers.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;
            }
        }
    }
}

Screenshot

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

Display Google maps from database on button click in ASP.Net

Show Google Maps using Latitude and Longitude in ASP.Net

Company

Explore

Follow us

Contact Us