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) };
function DrawShapeFromServer(JsonString) {
var source_control = byID("data");
source_control.value = JsonString;
this.shapes = DrawShapes();
}
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);
}