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

Last Reply 22 days ago By dharmendr

Posted 26 days 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)

You are viewing reply posted by: dharmendr 22 days ago.
Posted 22 days 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>