I am trying to retrieve data from database which has the coordinates that i fill there, and i have a small web page that shows a map, but i need the longitude and latitude to be selected from the database before viewing it, so is it possible to connect and retrieve data in the java script?!
btw here's the wepage xml:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="Map2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title></title>
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript">
//document.write("<?php echo 'hello'; ?>");
//select coordinates from Mysql DB
var map;
var geocoder;
var marker;
function InitializeMap() {
var latlng = new google.maps.LatLng(/*fetchedFromDB*/, /*fetchedFromDB*/);
var myOptions =
{
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
marker = new google.maps.Marker({ position: new google.maps.LatLng(/*fetchedFromDB*/, /*fetchedFromDB*/), map: map });
}
window.onload = InitializeMap;
</script>
</head>
<body style="height: 504px">
<table>
<tr>
</tr>
<tr>
<td colspan ="2">
<div id ="map" style="height: 529px; width: 1011px; margin-top: 0px;" >
</div>
</td>
</tr>
</table>
</body>
</html>
I am trying to retrieve data from database which has the coordinates that i fill there, and i have a small web page that shows a map, but i need the longitude and latitude to be selected from the database before viewing it, so is it possible to connect and retrieve data in the java script?!
btw here's the wepage xml:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="Map2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.googleapis./maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
//document.write("<?php echo 'hello'; ?>");
//select coordinates from Mysql DB
var map;
var geocoder;
var marker;
function InitializeMap() {
var latlng = new google.maps.LatLng(/*fetchedFromDB*/, /*fetchedFromDB*/);
var myOptions =
{
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
marker = new google.maps.Marker({ position: new google.maps.LatLng(/*fetchedFromDB*/, /*fetchedFromDB*/), map: map });
}
window.onload = InitializeMap;
</script>
</head>
<body style="height: 504px">
<table>
<tr>
</tr>
<tr>
<td colspan ="2">
<div id ="map" style="height: 529px; width: 1011px; margin-top: 0px;" >
</div>
</td>
</tr>
</table>
</body>
</html>
- 4 You can't interact directly with a database using Javascript. You may do so through some API, but not directly. Also, what's with the PHP in your C#? – Julio Commented Dec 19, 2013 at 16:41
- 2 If you put your mysql login credentials into the html as javascript, wouldn't this mean that everyone is able to use this data and login to your server? Everyone can read your sourcecode. Everyone could access your database. you can access MySQL using JavaScript, but only serverside with node.js. You can fetch the data with C# tho – Daniel W. Commented Dec 19, 2013 at 16:41
3 Answers
Reset to default 8Most of the time the way is to just use AJAX for such things.
Basically you need some server-side script that fetches data from database on request and returns it to javascript in some format (e.g. JSON). From client-side javascript you call this script via XMLHttpRequest when page gets loaded or when the users clicks some button etc.
You want to minimize the amount of area where two languages exchange data. At most, put everything in a single object and convert it to json:
<?php
$data = array( 'a' => $a );
?>
var data = <?php echo json_encode($data); ?>;
Though the better route is to write a page that does nothing but output JSON data, then read it in with an AJAX call.
I have solved this in an easy way, i retrieved the coordinates from database then i ran the script in code behind (inside the c# code) as shown:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MySql.Data.MySqlClient;
public partial class Map : System.Web.UI.Page
{
public static string latitude;
public static string longitude;
MySqlDataReader dr;
protected void Page_Load(object sender, EventArgs e)
{
using (MySql.Data.MySqlClient.MySqlConnection connection = new MySql.Data.MySqlClient.MySqlConnection("Server=XX;Port=3306;Database=XX;Uid=XX;Pwd=XX"))
{
connection.Open();
MySqlCommand cmd = connection.CreateCommand();
cmd.CommandText = "SELECT latitude,longitude FROM coordinates";
dr = cmd.ExecuteReader();
while (dr.Read())
{
latitude = dr[0].ToString();
longitude = dr[1].ToString();
}
connection.Close();
}
Response.Write("<script type='text/javascript' src='http://maps.googleapis./maps/api/js?sensor=false'></script>");
Response.Write("<script language='javascript' type='text/javascript'>"
+ "var map;"
+ "var marker;"
+ "function InitializeMap() {"
+ "var latlng = new google.maps.LatLng(" + latitude + "," + longitude + ");"
+ "var myOptions ="
+ "{ zoom: 17, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP,disableDefaultUI: true};"
+ "map = new google.maps.Map(document.getElementById('map'), myOptions);"
+ "marker = new google.maps.Marker({ position: new google.maps.LatLng(" + latitude + ", " + longitude + "), map: map }); }"
+ "window.onload = InitializeMap;"
+ "</script>");
}
}