Google map + server DB -> problem with global in javascript in ASP.NET

See more:

ASP.NET

Javascript

SQL

Google

I would like to keep shapes from Google map in MS SQL. I can write them to DB, but had a problem with getting them back. There is an example in the following code of two options to draw the shapes - "locally" and from "code behind". The first one works, the second - doesn't. I suppose that it is because of the global variable "map" in the second case doesn't visible and the method

pline.setValues({ map: map, id: shape.id })

doesn't work. So what is the way to solve the problem?

What I have tried:

ASPX:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APY_KEY&libraries=drawing,geometry&"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>

Creating the map:

<script type="text/javascript">

    var map;
    var shapes = [];

    function initMap() {

        var mapOptions = {
            center: new google.maps.LatLng(39.9078, 32.8252),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var mapElement = document.getElementById('mapDiv');
        map = new google.maps.Map(mapElement, mapOptions);
        window.map = map;

        var drawingManager = new google.maps.drawing.DrawingManager();
        drawingManager.setMap(map);

        google.maps.event.addDomListener(byID('Draw'), 'click', function () {
            DrawShapeFromLocal();
        })
    }

Functions to draw "from server" and locally:

function byID(s) { return document.getElementById(s) };

// RESTORE SHAPES FROM SERVER
function DrawShapeFromServer(JsonString) {
    var source_control = byID("data");
    source_control.value = JsonString;
    this.shapes = DrawShapes();
}
// RESTORE SHAPES LOCALY
function DrawShapeFromLocal() {
    var source_control = byID("data");
    var JsonString = "[{ \"type\":\"MARKER\",\"id\":666,\"draggable\":true,\"geometry\":[40.06457987067129,32.50796977539064]}," +
        "{ \"type\": \"POLYLINE\", \"id\": null, \"geometry\": [[40.055491911998566, 32.51192685360954], [39.772147235623216, 33.07497617001579]] }]";
    source_control.value = JsonString;
    this.shapes = DrawShapes();
}

Creating shapes functions:

function DrawShapes() {
    var shapes = [],
        shape, marker,position,pline;

    var source_control = byID("data");
    var arr = JSON.parse(source_control.value);

    for (var i = 0; i < arr.length; i++) {
        shape = arr[i];
        if (shape.type == 'MARKER') {

            position = new google.maps.LatLng(shape.geometry[0], shape.geometry[1]);
            marker = new google.maps.Marker({ position: position });
            marker.setValues({ map: map, id: shape.id })
            shapes.push(marker);
        }
        else if (shape.type == 'POLYLINE') {
            pline = new google.maps.Polyline({ path: this.ll_(shape.geometry) });
            pline.setValues({ map: map, id: shape.id })
            shapes.push(pline);
        }
    }
    return shapes;
}

function ll_(path) {
    if (typeof path === 'string') {
        return google.maps.geometry.encoding.decodePath(path);
    }
    else {
        var r = [];
        for (var i = 0; i < path.length; ++i) {
            r.push(this.pp_.apply(this, path[i]));
        }
        return r;
    }
}
function pp_(lat, lng) {
    return new google.maps.LatLng(lat, lng);
}

Loading the map:

    google.maps.event.addDomListener(window, 'load', initMap);

</script>

HTML body:

<table class="nav-justified" border="1">
    <tr>
        <td>
            <div id="mapDiv"></div>
        </td>
    </tr>
    <tr>
        <td style="width: 1200px">

            <input id="Draw"      value="Draw local"  type="button" />
            <asp:Button ID="butASPReadDB" runat="server" Text="Draw from DB" OnClick="butASPReadDB_Click" />
            <input id="data" value="" readonly class="auto-style1" />

        </td>
    </tr>
</table>

Code behind:

protected void butASPReadDB_Click(object sender, EventArgs e)
{
    string JSONstring =
        "[{ \"type\":\"MARKER\",\"id\":666,\"draggable\":true,\"geometry\":[40.06457987067129,32.50796977539064]}," +
     "{ \"type\": \"POLYLINE\", \"id\": null, \"geometry\": [[40.055491911998566, 32.51192685360954], [39.772147235623216, 33.07497617001579]] }]";

    ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "DrawShapeFromDB", "DrawShapeFromServer('" + JSONstring + "')", true);

}