Global variable in Javascript Google Map + DB

[vavania]

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 DrawShapeFromLocal works, the second (DrawShapeFromServer) - 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?

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);
         }