Nested AJAX Controls: Need help with implementing google map with Ajax

Hi, i am making use of the Google maps to save a location, i wanted to save the lat and lng value of the marker into my database, but without any success. Could someone enlighten me pls, many thanks in advance

<%@dotnet.itags.org. Page Language="VB" %
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
Protected Sub post_Click(ByVal sender As Object, ByVal e As System.EventArgs)

Try
eventDataSource.Insert()
Catch ex As Exception

End Try
End Sub
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>map</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<link href="http://links.10026.com/?link=jiawei.css" rel="stylesheet" type="text/css" />
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAATWDgkaMeL60f_hR3JzHgQBRBZbUqgwWQv7nmLu01TGDQYDe1qhRYsXRdid8s1O4VSMi4tlCJ6WMXJA"
type="text/javascript"></script>

<script type="text/javascript"
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
var slat=point.lat();
var slng=point.lng();
document.getElementById('lat').innerHTML=slat;
document.getElementById('lng').innerHTML=slat;

});
}
}

//]]>
</script>
</head>
<body id="event" onload="load()" onunload="GUnload()">
...

<div id="map" style="width: 600px; height: 400px"></div>
<asp:Label ID="lat" runat="server" Text=""></asp:Label>
<asp:Label ID="lng" runat="server" Text=""></asp:Label><br />
<asp:Button ID="post" runat="server" Text="Post" ><br />
......
</body>
</html>.

Hi There,

jwillbe:
Hi, i am making use of the Google maps to save a location, i wanted to save the lat and lng value of the marker into my database, but without any success. Could someone enlighten me pls, many thanks in advance

<%@. Page Language="VB" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
Protected Sub post_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles post.Click

Try
'eventDataSource.Insert() DO YOUR INSERT HERE
Catch ex As Exception
End Try
End Sub
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>map</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<link href="http://links.10026.com/?link=jiawei.css" rel="stylesheet" type="text/css" />
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAATWDgkaMeL60f_hR3JzHgQBRBZbUqgwWQv7nmLu01TGDQYDe1qhRYsXRdid8s1O4VSMi4tlCJ6WMXJA"
type="text/javascript"></script>

<script type="text/javascript"
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
var slat=point.lat();
var slng=point.lng();
document.getElementById('lat').innerHTML=slat;
document.getElementById('lng').innerHTML=slat;
document.getElementById('post').click(); // you can use this to click the button when you make a marker

});
}
}
//]]>
</script>
</head>
<body id="event" onload="load()" onunload="GUnload()">
...
<div id="map" style="width: 600px; height: 400px"></div>
<asp:Label ID="lat" runat="server" Text=""></asp:Label>
<asp:Label ID="lng" runat="server" Text=""></asp:Label><br />
<asp:Button ID="post" runat="server" Text="Post" ><br />
......
</body>
</html>.

Please refer to the bold line.

1) Add event handler to post button

2) When you click on google map, use that event to trigger your button too.

e.g

document.getElementById('post').click(); // you can use this to click the button when you make a marker

i tried ur method, but the lat and lng values are still unable to save into my database, btw the lat n lng attributes are set to String data type in my database

Hi There,

By the way, did you set parameter value to your datasource

e.g. say your eventdatasource insert startment have 2 parameter. lat and lng

eventDataSource.InsertParameters["lat"].DefaultValue = lat.Text;

eventDataSource.InsertParameters["lng"].DefaultValue = lng.Text;

'eventDataSource.Insert() DO YOUR INSERT HERE

If above not working

Did you add insert statement to your eventdatasource ?

Can you should me your datasource.

i don't quite get ur question do u mean this?

Hi There,

Yes, this is what im talking about.

In your

Protected void post( object sender, System.EventArgs e )

{

// on save your data, you require to set the value to your parameter // like following

eventDataSource.InsertParameters["lat"].DefaultValue = lat.Text;

eventDataSource.InsertParameters["lng"].DefaultValue = lng.Text;

}

hi there, i am quite new in programming, where do i put that piece of code to?

hi there, i am new to programming, where do i put that piece of code into?

Hi There,

Didn't notice that you are using VB.

Put the code as below

' SET YOUR PARAMETER VALUE BEFORE INSERT

eventDataSource.InsertParameters["lat"].DefaultValue = lat.Text

eventDataSource.InsertParameters["lng"].DefaultValue = lng.Text

' AND ALL OTHER VALUE THAT YOU NEED TO IN YOUR INSERT STATEMENT

eventDataSource.Insert() DO YOUR INSERT HERE

Catch ex As Exception

End Try

End Sub

</script>

Also, have a look at this tutorial, it give you idea how to use datasourcehttp://www.asp.net/learn/dataaccess/default.aspx?tabid=63

hi there, i am using the sqldatasource control, the insert statement was already created

INSERT INTO [eEvent] ([eventTitle], [fromDate], [toDate], [eventTimeHr], [eventTimeMin], [eventDesc], [eventVenue], [lat], [lng]) VALUES (@.eventTitle, @.fromDate, @.toDate, @.eventTimeHr, @.eventTimeMin, @.eventDesc, @.eventVenue, @.lat, @.lng)

thx a lot anyway

Hi There,

jwillbe:
INSERT INTO [eEvent] ([eventTitle], [fromDate], [toDate], [eventTimeHr], [eventTimeMin], [eventDesc], [eventVenue], [lat], [lng]) VALUES (@.eventTitle, @.fromDate, @.toDate, @.eventTimeHr, @.eventTimeMin, @.eventDesc, @.eventVenue, @.lat, @.lng)

You have to pass value to the sqldatasource as argument ( e.g. value for (@.eventTitle, @.fromDate, @.toDate, @.eventTimeHr, @.eventTimeMin, @.eventDesc, @.eventVenue, @.lat, @.lng)

My previous post is teaching you how to set value to it.

Can the datasource wrong? Check again.

Wednesday, March 21, 2012

Need help with implementing google map with Ajax

No comments:

Post a Comment

Nested AJAX Controls

Blog Archive

About Me