I am new for the php and scripting i have jquery code for google map where in infobox i have to load the php result which will be populated in drop down box dynamically. I have this php file separately but i dont know how to get this integrated in Jquey code and add this php result to dropdown box of info window this info window will open on map click event...i am posting html file with Jquery and php file separtley please help.
index.php:
Code: Select all
<?php
$serverName = "BSD-GESERVER01\SQLEXPRESS";
$connectionInfo = array( "Database"=>"master", "UID"=>"sa", "PWD"=>"sa");
$conn = sqlsrv_connect( $serverName, $connectionInfo );
if( $conn === false ) {
die( print_r( sqlsrv_errors(), true));
}
$sql = "SELECT Group_ID FROM Test";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
echo $row['Group_ID']."<br />";
}
sqlsrv_free_stmt( $stmt);
?>
Code: Select all
<!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" xml:lang="en" lang="en">
<head profile="http://dublincore.org/documents/dcq-html/">
<title>Simulator GIS</title>
<meta name="keywords" content="Google maps, jQuery, plugin, geo search" />
<meta name="description" content="GIS for simulator energy parmameters" />
<meta http-equiv="content-language" content="en"/>
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<meta name="DC.title" content="Simulator Geographical Information System " />
<meta name="DC.subject" content="Google maps;jQuery;plugin;geo search" />
<meta name="DC.description" content="Geographical Information System For Simulator v3" />
<meta name="DC.creator" content="Pradeep" />
<meta name="DC.language" content="en"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shCore.css" />
<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shThemeDefault.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="../web/jquery.fn.gmap.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shAutoloader.js"></script>
<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="../thirdparty/SyntaxHighlighter/shBrushXml.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
// Only for code formatting
SyntaxHighlighter.all();
$('#map_canvas').gmap().bind('init', function(event, map) {
$(map).click( function(event) {
$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'draggable': true, 'bounds': false}, function(map, marker) {
$('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"><p><label for="country">Country</label><input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/></p><p><label for="state">State</label><input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/></p><p><label for="address">Address</label><input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/></p><p><label for="Group">Group</label><select><option value="G4">Group4</option><option value="G1">Group1</option><option value="G2">Group2</option><option value="G3">Group3</option></select></p><p><label for="comment">Comment</label><textarea id="comment" class="txt" name="comment" cols="40" rows="5"></textarea></p></form>');
findLocation(marker.getPosition(), marker);
}).dragend( function(event) {
var self = this;
findLocation(event.latLng, this);
}).click( function() {
openDialog(this);
})
});
});
function findLocation(location, marker) {
$('#map_canvas').gmap('search', {'location': location}, function(results, status) {
if ( status === 'OK' ) {
$.each(results[0].address_components, function(i,v) {
if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
$('#state'+marker.__gm_id).val(v.long_name);
} else if ( v.types[0] == "country") {
$('#country'+marker.__gm_id).val(v.long_name);
}
});
marker.setTitle(results[0].formatted_address);
$('#address'+marker.__gm_id).val(results[0].formatted_address);
openDialog(marker);
}
});
}
function openDialog(el) {
$('#dialog'+el.__gm_id).dialog({'modal':true, 'title': 'Edit and save Group', 'buttons': {
"Save": function() {
$(this).dialog( "close" );
return false;
},
"Remove": function() {
$(this).dialog( "close" );
el.setMap(null);
return false;
}
}});
}
});
//]]>
$('#Loadgroups').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
</script>
<style type="text/css">
label { display:block; font-weight:bold; margin: 0 0 0.25em; }
.txt { width: 99%; }
</style>
</head>
<body>
<div id="doc">
<div id="hd">
<h1><a href="/">Geographical Information System For Simulator</a></h1>
</div>
<div id="dialog"></div>
<div class="item gradient ui-corner-all shadow-all">
<div id="map_canvas"></div>
</div>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-17614686-3");
pageTracker._trackPageview();
} catch(err) {}
</script>
<button id="Loadgroups">Load the GIS Groups</button>
</body>
</html>