Click here to Skip to main content
15,035,723 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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);

}
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900