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

Last Reply one month ago By dharmendr

Posted one month 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=, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.XtraCharts.v20.2, Version=, 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">
                "title": '<%# Eval("Name") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>',
                "description": '<%# Eval("Description") %>'
<script type="text/javascript">
    $(function () {
        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);

<dx:ASPxTimer ID="ASPxTimer1" runat="server" Interval="60000" ClientInstanceName="Timer1"></dx:ASPxTimer>
<div id="dvMap" style="width: 895px; height: 600px" >


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
    End If
End Sub
Sub LoadMap()
    ' my code
    rptMarkers.DataSource = dt1
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()
                        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)

This question does not have replies that have been liked.