I'm currently trying to use google maps within datagrid details!..
First expanded row show GoogleMap fine but after that nothing is showed ...! does anyone tried to use this?
Kind regards,
Here you can see cust_detail.php where google map is called and Detailed Row is generated ...
<?php
$itemid = htmlspecialchars($_REQUEST['idcust']);
$addid = htmlspecialchars($_REQUEST['addr']);
include '../../conn.php';
$db=crearConexion();
$db->query("set NAMES utf8;");
$query="SELECT * FROM test.customer where idcustomer='$itemid'";
if(!$result1 = $db->query($query))
{
die('There was an error running the query [' . $db->error . ']');
}
$item = $result1->fetch_array(MYSQLI_BOTH);
$result1->close();
$db->close();
?>
<script type="text/javascript">
$(function () {
var gmap
var status
var mapDiv = document.getElementById('myMap');
options = {
center: new google.maps.LatLng(-34.8, 138.6),
scaleControl: false,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
navigationControl: false,
disableDoubleClickZoom: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};
gmap = new google.maps.Map(mapDiv, options);
gmap.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
]
}
});
geocoder = new google.maps.Geocoder();
var addid = "<?php echo $addid; ?>";
//In this case it gets the address from an element on the page, but obviously you could just pass it to the method instead
var address = addid;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//In this case it creates a marker, but you can get the lat and lng from the location.LatLng
gmap.setCenter(results[0].geometry.location);
var locMarker = new google.maps.Marker({
map: gmap,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
//locPath.setMap(gmap);
});
</script>
<div id="detailer" style="height: 350px;">
<form method="post">
<table class="dv-table" style="width:100%;background:#fafafa;padding:5px;margin-top:5px;">
<td rowspan="3" style="width:60px">
<?php
$img = "sales/customer/user-128.png";
echo "<img src=\"$img\" style=\"width:60px;margin-right:20px\" />";
?>
</td>
<tr>
<td>Codigo</td>
<td><input name="idcustomer" class="easyui-validatebox" required="true"></input></td>
<td>Nombre</td>
<td><input name="name" class="easyui-validatebox" required="true"></input></td>
</tr>
<tr>
<td>Direccion</td>
<td><input name="address"></input></td>
<td>Mail</td>
<td><input name="mail" class="easyui-validatebox" validType="email"></input></td>
</tr>
</table>
<div style="padding:5px 0;text-align:right;padding-right:30px">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">Cancel</a>
</div>
<div id="myMap" style="height:200px;width: 200px">
map
</div>
</form>
</div>
Here cust_main from datagrid is shown and where OnExpandRow is declared!
<?php
require_once('../../access/auth.php');
include 'cust_abm.php';
?>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<div id="tableCust" style="height: 500px">
<table id="dg" style="width:auto;height:auto" toolbar="#tb" url="Sales/customer/cust_retrieve.php?type=gen" pagination="true" sortname="idcustomer" sortorder="desc" title="Clientes" singleselect="true" fitcolumns="true">
<thead>
<tr>
<th field="idcustomer" width="100">Cust. Code</th>
<th field="name" width="100">Name</th>
<th field="address" align="right" width="100">Address</th>
<th field="id" align="right" width="100">Id</th>
<th field="phone" width="100" align="center">Phone</th>
<th field="mail" width="100" align="center">Mail</th>
<th field="paymentcode" width="100" align="center">PayCode</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div class="ddv"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
border:false,
cache:true,
href:'sales/customer/cust_detail.php?idcust='+row.idcustomer+"&addr="+row.address,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
</script>
<div id="tb">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="$('#custabm').window('open')" plain="true" >Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>
