[Solved] Google Maps V3: Map displayed incorrect zoom position in ASP.Net

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Thanks, it works, but some problem.

Refresh Google Map Markers at some interval without page refresh using jQuery Ajax in ASP.Net

After every 1 munutes markers refreshed witout any problem with correct information (page not refreshed). 

Problem is that when I open page first time map opened with wrong zoom. But after 1 minute markers refresh and every another rfreshing evrything correct.

Just problem when page opened first time.

%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MapControl.ascx.vb" Inherits="CWDash.CWDash.MapControl" %>
<%@ Register Assembly="DevExpress.Web.v20.2, Version=20.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.XtraCharts.v20.2, Version=20.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="dx" %>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBhmm1I5_2YztGOopNgE3tgiDkskowwYM"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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">
    $(function () {
        BindMarkers();
        setInterval(function () { BindMarkers() }, 60000);
    });
    //window.onload = function () {
    function BindMarkers() {
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //Create LatLngBounds object.
        var latlngbounds = new google.maps.LatLngBounds();
        for (var 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("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            latlngbounds.extend(marker.position);
        }

        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);
    }
</script>
<dx:ASPxTimer ID="ASPxTimer1" runat="server" Interval="60000" ClientInstanceName="Timer1"></dx:ASPxTimer>
<div id="dvMap" style="width: 895px; height: 600px" >
</div>

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        LoadMap()
    End If
End Sub
Sub LoadMap()
    ' my code
    rptMarkers.DataSource = dt1
    rptMarkers.DataBind()
End Sub

Private Function GetData(ByVal query As String) As DataTable
            Dim conString As String = Session("strConnection") ' "server=rs.forzacorp.com,1435;uid=sa;password=m4a176mm;database=CWDash;encrypt=true;trustServerCertificate=true" ' ConfigurationManager.ConnectionStrings("constr").ConnectionString
            Dim cmd As SqlCommand = New SqlCommand(query)
            Using con As SqlConnection = New SqlConnection(conString)
                Using sda As SqlDataAdapter = New SqlDataAdapter()
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    Using dt As DataTable = New DataTable()
                        sda.Fill(dt)
                        Return dt
                    End Using
                End Using
            End Using
End Function

I think that function BindMarkers() start working not on begining, this finction start work after first minute (interval)

Posted 2 months ago

Hi alex0230,

Try to use JavaScript setTimeout function to load the map with some delay.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBhmm1I5_2YztGOopNgE3tgiDkskowwYM"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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">
    $(function () {
        setTimeout(BindMarkers, 3000);
        setInterval(function () { BindMarkers() }, 10000);
    });
    function BindMarkers() {
        var map = new google.maps.Map(document.getElementById("dvMap"), {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infoWindow = new google.maps.InfoWindow();
        //Create LatLngBounds object.
        var latlngbounds = new google.maps.LatLngBounds();
        for (var 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("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            latlngbounds.extend(marker.position);
        }

        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);
    }
</script>
<div id="dvMap" style="width: 895px; height: 600px"></div>