⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠
Posted 18 June 2015 - 11:31 AM
Hey, I'm newbie in here. This is the scenario:
I've a table with latitude and longitude field in my database. The question is, I want fill the values with gmap plugin library in CI. The values from gmap's marker. How to show the map in grocery crud and fill the field with latitude and longitude automatically when I drag the marker ?
Btw, I use library from https://github.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library
Sorry for my english.
Thanks.
Posted 18 June 2015 - 13:41 PM
Hi, I dont see that question relate with GC. Anyway for display map use callbacks add/update field and other doing with JS.
Posted 16 September 2015 - 08:57 AM
i have the same issue T_T, please help for our future, we made a GIS website with grocery crud and we were stuck in this problem on how to insert map inside add, edit and view pane of grocery crud using Biostall codeigniter-googlemaps-v3 API library.
please @web-johnny, help us, thank you so much! :(
Posted 21 September 2015 - 15:01 PM
There was 1 project where i had used it...how.. heres the pattern
//Now set the 2 fields we want to capture with type set to hidden
$crud->change_field_type('latitude', 'hidden');
$crud->change_field_type('longitude', 'hidden');
//make sure you add MAP as extra / additional field that we gona set the callback to.
.......
$crud->callback_add_field('map', array($this, 'show_map_field'));
........//Here we set the callback for field generation
if ($crud->getState() == 'read') {
$crud->set_js('http://maps.google.com/maps/api/js?sensor=false', FALSE);
$crud->set_js("manage/plot_point_js");
} elseif ($crud->getState() == 'add' || $crud->getState() == 'edit' || $crud->getState() == 'copy') {
$crud->set_js("assets/scripts/map.js");
$crud->set_js('http://maps.google.com/maps/api/js?sensor=false', FALSE);
................................
//Make sure you remove / unset the map field before you do insert / update as its not 1 in the table and non-removal of it will give error
$crud->callback_before_insert(array($this, 'unset_map_field_add'));
$crud->callback_before_update(array($this, 'unset_map_field_edit'));
.........//Function to generate the map field
function show_map_field($value = false, $primary_key = false) {
return '<p>Refine your position by dragging and dropping the pin on your location</p>
<div id="retailer-map" style="width:530px; height:300px;"></div>';
}
........................
function plot_point_js() {
$retailer_id = $this->session->userdata('retailer_id');
$retailer = $this->cModel->getByField('retailers', 'rid', $retailer_id);
if (count($retailer) > 0) {
$latitude = $retailer['latitude'];
$longitude = $retailer['longitude'];
$script = '
var map;
var marker;
var circle;
var geocoder;
window.onload = function() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(' . $latitude . ',' . $longitude . ');
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("retailer-map"), myOptions);
addMarker(map.getCenter());
google.maps.event.addListener(map,"click", function(event) {
//alert("You cannot reset the location by changing pointer in here");
//addMarker(event.latLng);
});
}
function addMarker(location) {
if(marker) {marker.setMap(null);}
marker = new google.maps.Marker({
position: location,
draggable: true
});
marker.setMap(map);
}
';
echo $script;
}
}
Hope the pattern helps you fix / solve your problem.
Happy GCing :)
Posted 24 September 2015 - 14:41 PM
@Amit Shah nice! that would be helpful a lot, but i just wonder when i set a laltong assigned field to hidden, the assigned field doesn't catch a value, when i drag the marker, it doesn't generate latlong in the assigned field cuz the said field is hidden and the map could get a error in the firebug.
page_ui_crudOp.php (where the add, edit and view pane of groceryCRUD is generated via modal)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<?php foreach ($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach ($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(7.281300, 125.684750);
var marker;
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: myCenter,
draggable: true
});
marker.setMap(map);
google.maps.event.addListener(marker, "drag", function () {
document.getElementById("grid").value = marker.getPosition().toUrlValue(); //set lat current longitude where the marker is plotted
// document.getElementById("grid").value = marker.position.toUrlValue();
});
var flightPlanCoordinates = [{lat:7.292363, lng:125.667018},
{lat:7.291958, lng:125.671030},
{lat:7.292022, lng:125.673777},
{lat:7.291532, lng:125.675864},
{lat:7.292884, lng:125.676464},
{lat:7.292809, lng:125.677291},
{lat:7.292682, lng:125.680069},
{lat:7.292283, lng:125.682475},
{lat:7.291916, lng:125.684653},
{lat:7.290319, lng:125.685536},
{lat:7.290787, lng:125.688089},
{lat:7.292937, lng:125.689033},
{lat:7.294427, lng:125.689951},
{lat:7.296428, lng:125.691737},
{lat:7.295853, lng:125.692123},
{lat:7.295300, lng:125.692273},
{lat:7.293703, lng:125.694247},
{lat:7.294001, lng:125.694612},
{lat:7.294172, lng:125.697123},
{lat:7.291000, lng:125.698678},
{lat:7.289723, lng:125.697091},
{lat:7.287808, lng:125.695717},
{lat:7.285573, lng:125.691866},
{lat:7.284466, lng:125.690793},
{lat:7.282657, lng:125.689763},
{lat:7.279996, lng:125.688411},
{lat:7.278123, lng:125.686930},
{lat:7.277208, lng:125.686287},
{lat:7.276059, lng:125.685600},
{lat:7.274207, lng:125.683604},
{lat:7.274037, lng:125.683175},
{lat:7.275675, lng:125.678412},
{lat:7.275697, lng:125.673975},
{lat:7.280188, lng:125.674565},
{lat:7.280156, lng:125.672009},
{lat:7.286728, lng:125.674788},
{lat:7.287308, lng:125.673302},
{lat:7.288127, lng:125.669896},
{lat:7.287137, lng:125.669834},
{lat:7.287196, lng:125.665787},
{lat:7.288962, lng:125.666312},
{lat:7.288718, lng:125.667889},
{lat:7.290819, lng:125.667830},
{lat:7.291123, lng:125.668512},
{lat:7.289612, lng:125.668116},
{lat:7.289734, lng:125.668899},
{lat:7.290080, lng:125.668830},
{lat:7.290309, lng:125.669729},
{lat:7.290271, lng:125.670128},
{lat:7.290301, lng:125.670828},
{lat:7.291330, lng:125.670852},
{lat:7.291793, lng:125.666922},
{lat:7.291916, lng:125.666885},
{lat:7.292363, lng:125.667018}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
function ageCount() {
var date1 = new Date();
var bday = document.getElementById("bday").value;
var date2 = new Date(bday);
var pattern = /^\d{4}-\d{2}-\d{2}$/;
if (pattern.test(bday)) {
var y1 = date1.getFullYear();
var y2 = date2.getFullYear();
var age = y1 - y2;
document.getElementById("age").value = age;
} else {
alertify.alert("invalid date format.!! Please enter in (YYYY-MM-DD) format").set('modal', false);
document.getElementById("age").value = "";
return false;
}
}
function fillAddress() {
var purok = document.getElementById("purok").value;
if (purok === "") {
document.getElementById("resAddress").value = "";
document.getElementById("perAddress").value = "";
} else {
document.getElementById("resAddress").value = "Prk. " + purok + ", Panabo City, Davao del Norte, Philippines 8105";
document.getElementById("perAddress").value = "Prk. " + purok + ", Panabo City, Davao del Norte, Philippines 8105";
}
}
</script>
</head>
<body id="body" class="body">
<div id="googleMap" style="width:560px;height:380px;"></div>
<div class="block full" style="margin:0 0 0px;">
<div class="block-content-full">
<?php echo $output; ?>
</div>
</div>
</body>
</html>
in the "document.getElementById("grid").value = marker.getPosition().toUrlValue();", the "grid" is the name of the id where i put the latlong value of the dragged marker and the "#grid" field is generated via callback function in add and edit pane. Hope you get my problem @Amit Shah, thanks in advance for answering my questions. :)
Posted 26 September 2015 - 11:41 AM
I am extreamly sorry . wont be able to go through the code to identify where your problem lies in ..
but i have shared u the logic..
2 important thing - if u may have noticed in my share..
1 - make the lat / lon fields hidden .. the need to be present in the fields list.
2 - populate the post array in the callback and return the array so the rest can be taken care perfectly..
Hope you can find in solution u desire...
Happy GCing :)
Posted 27 September 2015 - 16:09 PM
@Amit Shah so should i fill a dummy value of lat/long fields so that (for ex:) when i drag a marker, the #grid will catch a latlong value of dragged marker?
Posted 29 September 2015 - 09:43 AM
well..
i was not intending to share you how to grab up the lat long as u required in your application,
i just intended to share you a pattern as how to include non GC functionality along with GC .. Hence i cannot actually understand the logic that you trying to crack or so.. sorry unfortunately i dont have enough time over the same ...
If i get spare time, will think over stuff and may respond accordingly.
Happy GCing :)
Posted 29 September 2015 - 14:45 PM
yeah, sorry about that @Amit Shah...
actually, i get the latlong value when i do callback the input field of latlong to readonly. And i just want to know if it is possible to put a value of a hidden input field.
Posted 30 September 2015 - 06:23 AM
yes.. the process is full game of HTML / JS ... GC .is just a tool that generates it..At the end.. what you could have controlled earlier with regular HTML JS. .. can be controlled in from here..
You just need to improvise over your visualiztions / flow for things and you will find things much simpler
Happy GCing :)
Posted 01 October 2015 - 13:58 PM
thanks for the help and ideas @Amit Shah, hope you help others like me who new to this library, kudos! (y)