Javascript & Database

slopey · 20-02-2007 3:20pm #1

I'm a newbie to web design(only know vb), trying to implement a google maps page(all apis in Javascript). Have got google maps working by taking address from text box and adding marker to the google map for this address. Would like to change from taking values from text box to Access database. Can you access a server side database in Javascript, if so how? If not how do you go about passing values to a Javascript function from an asp(vb) page, does the javascript need to be ina separate file?

Have spent past hour googling for this but I'm just making myself confused, if anyone has any pointers or links to this information it'd be great.

slopey · 20-02-2007 3:22pm

by the way this is my code so far

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Example - Geocoding API</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAbm85_kNVPkPhWI1-EcxEqxTZBK0j_nwXAu251o6IeU4kGP7FEBTbPkL1tIGPxfYmOfITHj0dZlSIzg"
type="text/javascript">
</script>
<script type="text/javascript">
var map = null;
var geocoder = null;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(53.5319, -9.0419), 9);
geocoder = new GClientGeocoder();
}
}

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 9);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}

function alertGrid (address) {
geocoder.getLatLng(address, function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 8);
var marker = createMarker(point,address)
map.addOverlay(marker);
}
}
);
}

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
</script>
</head>

<body onload="load()" onunload="GUnload()">
<form action="#" onsubmit="alertGrid(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="" />
<input type="submit" value="Go!" />
</p>
<div id="map" style="width: 700px; height: 650px"></div>
</form>
</body>
</html>

forbairt · 20-02-2007 3:38pm

You'll need write some asp code to read from a database and output your data

My recommendation would be to have the file output as XML ... but it'll all depend on your needs ...

javascript can then read the output of this file

<SCRIPT LANGUAGE="JavaScript">
<!--
  var xmldoc=new ActiveXObject("MSXML2.DOMDocument.3.0");
  xmldoc.load("myoutput.asp");
  alert(xmldoc.documentElement.xml);
// -->
</SCRIPT>

You basically have a few bits to figure out

1 how to get asp to talk to a database
2 what query you need to run on that database
3 what security implications there are with this ?
4 how to handle xml data with javascript

so break it up like that and do a web search

slopey · 20-02-2007 9:42pm

Cheers forbairt, Just the direction I needed, got it working perfectly, code below in case anyone else comes across this problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Import Namespace = "System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Example - Geocoding API</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAbm85_kNVPkPhWI1-EcxEqxTZBK0j_nwXAu251o6IeU4kGP7FEBTbPkL1tIGPxfYmOfITHj0dZlSIzg"
type="text/javascript">
</script>
<script type="text/javascript">
var map = null;
var geocoder = null;

function load() {
var straddress = ""
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(53.5319, -9.0419), 9);
geocoder = new GClientGeocoder();
}
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("tryXML.xml");
nodes = xmlDoc.documentElement.childNodes
for(i = 0; i < nodes.length; i++){
nodes2 = nodes.item(i).childNodes
for(x = 0; x < nodes2.length; x++) {
straddress = straddress + nodes2.item(x).text + ","
}
alertGrid(straddress)
straddress = ""
}
}

function alertGrid (address) {
geocoder.getLatLng(address, function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 8);
var marker = createMarker(point,address)
map.addOverlay(marker);
}
});
}

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
</script>

<script runat="server" Language="VB">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim strSelect As String
Dim conn As New OleDbConnection()
Dim dsSelect As New DataSet()
Dim adSelect As New OleDbDataAdapter()

conn.ConnectionString = "PROVIDER=SQLOLEDB;Data Source=your server;initial Catalog=SHSSERVER;User Id=;Password=;"
conn.Open()
strSelect = "Select Address1, Address2, Address3 from Address;"
adSelect.SelectCommand = New OleDbCommand(strSelect, conn)
adSelect.Fill(dsSelect)
dsSelect.WriteXml(Server.MapPath("./tryXML.xml"))

End Sub
</script>
</head>

<body onload="load()" onunload="GUnload()">
<form>
<p>
</p>
<div id="map" style="width: 700px; height: 650px"></div>
</form>
</body>
</html>

Javascript & Database

Comments