I might be interested as well but I would also like to add a GPS location to that, another words when user checks in the Latitude/Longtitude fields are filled in automatically. Any ideas ?
OK Giu, I looked up this script
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Say I have 2 Var’s [glo_longtitude] and [glo_lattitide] - how would I get data into those tow variables ?
Arthur
I think the way to go is to fill the fields on screen with JQuery/Javascript.
Giu is correct. For another project, we used Javascript and the Google Maps API (no Scriptcase) to use those GPS coordinates for a mapping project. Users will have to give their permission for your application to access their GPS location. This is a browser limitation. A good fallback (if they decline to give you permission) is to allow them to enter an address. Using the Google Maps API, you can reverse engineer their long/lat.
bradk - can you elaborate on “we used Javascript and the Google Maps API (no Scriptcase)” ?
I have no experience with API + SC at all so the first question is how / where can I find any examples ? Yes I have seen GOOGLE Api examples etc, but I still do not know how to implement those into SC project (?).
Giu - I really appreciate your input but the general statements do not help much. I’m looking for some examples (like I said above).
I think if would be really great if NetMake will allow to upload sample Apps to their sever and share with other users (while giving the uploaders some benefits)
There is a complete example here: https://developers.google.com/maps/articles/geolocation#DetectingUserLocation
And thus also here: https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
It is just basic javascript, just remove the code you dont need…
In that code there are JS variables created to hold coordinates. That’s clear but I haven’t yet used any JS code in SC so the question is how can get values from JS Var
s into SC Var’s ?
IT would be really helpful to post some examples or create some help/webinar etc. So far anything that’s going beyond standard code generation and options is terribly documented.
aka here is a piece of code
function showPosition(position){
document.getElementById(‘id_sc_field_latitudine’).value=position.coords.latitude;
document.getElementById(‘id_sc_field_longitudine’).value=position.coords.longitude;
document.getElementById(‘id_sc_field_notegeoref’).value = “Geolocalizzation done.”;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById(‘id_sc_field_notegeoref’).value = “Geolocalizzation not supported.”;
}
The id_sc_field_xxxxxxxxx where xxxxxxxx is the name of your variable glo_longtitude etc…
I am interested in the moment is to show the location based on address. If the user enters the location into the form and saves the record the grid (for example would show the Location Pin on the map). This is just to simplify the understanding and implementation. To make it even more simple I’m making temporary assumption that Lattitude/Longtitude coordinates are already given.
In the real life of course the proper function need to retrieve those two by using the ADDRESS. I spoke with other users outside of this forum and there is huge lack of examples. The documentation for JS/PHP etc on other websites is OK and everybody can go there and learn the API details. The issue is not how to use tha API but how to integrate it with SC Apps. This is where we need help and examples. The fragments of code which is pulled out of the scope do not help much.
VDPVince - I do not fully understand your example code (especially your _xxxxxxxx. How would I fill [glo_lattitude] , [glo_longtitude] from this code ?
The better illustrate the whole picture I would like to see a simple form where user enters the address (Street, town, region, zip) and upon validation the map with the pushpin is shown. This of course would require Google API and that is the whole issue how to integrate it (step by step) . I’m completely blank on using API’s with SC and many other (not so advanced SC users as well). I just spoke with two other people this week, They have no idea how to do it. The only example I was able to find was a video webinar recorded by Marcia but it is very incomplete and even watching it I saw several things not working.
The help on those topics would be greatly appreciated:
- how to read/write to JS variables
- how to read/write to PHP variables
- how to call JS function from SC and get the returned parameters assigned to SC variables
- steps to implement API’s
ARTHUR
I have use drop pin map for one of my application, Let me explain to help you create step by step Guideline:
- create a Blank PHP application and load google map
Code should be somethink like this onExecute event
?>
<!DOCTYPE html>
<head>
<meta name=“viewport” content=“initial-scale=1.0, user-scalable=no” />
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8”/>
<title>Alra Outreach Audition Venues</title>
<script src=“https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEMAPKEY”
type=“text/javascript”></script>
<script src="<?php echo sc_url_library(‘prj’, ‘APIGoogleMaps’, ‘functionGoogleMaps.js’); ?>" type=“text/javascript”> </script>
<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
position:absolute;
}
</style>
</head>
<body onload =“load()”>
<div id="map" class="google-maps"> </div>
<!--div id="map" style="width: 600px; height: 580px"> </div-->
</body>
</html>
<?
- Create another blank application that creates xml data rendering data from database
Code should be somethink like this onExecute event
in here Table audition_location is use to store data.
sc_select(my_data, “SELECT school, building_number, street, town_city, postcode, county, country, lat, lng, type FROM audition_location where status =‘Approved’”);
if ({my_data} === false)
{
sc_error_message("Error on fetching data.");
}
else{
header("Content-type: text/xml");
echo '<markers>';
while (!$my_data->EOF)
{
$address = $my_data->fields[1];
for($i=2; $i<7; $i++){
if($my_data->fields[$i] !=''){
$temp = $address. ', '. $my_data->fields[$i];
$address =$temp;
}
else{
$temp = $address;
$address =$temp;
}
}
echo '<marker ';
echo 'name="' . $my_data->fields[0].'" ';
echo 'address="'.$address.'" ';
echo 'lat="' . $my_data->fields[7].'" ';
echo 'lng="' . $my_data->fields[8].'" ';
echo 'type="' . $my_data->fields[9].'" ';
echo '/>';
$my_data->MoveNext();
}
$my_data->Close();
echo '</markers>';
}
Output of this application will be:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<markers><marker name=“Orange Country” address=“202, Heath Road, Hounslow, Tw3 2Nx, Middlesex , vghbgubghubguh” lat=“51.4656105” lng="-0.3483627" type=“Private”/><marker name=“Alra North” address=“Unit 1, Mill At The Pier, Trencherfield Mill, Heritage Way, Wigan, WN3 4BF, Lancashire, UK” lat=“53.5420991” lng="-2.6377473" type=“Public”/><marker name=“Consider This” address=“54, Cowley Mill Road, Uxbridge, UB8 2QE, Middlesex , UK” lat=“51.5382013” lng="-0.4882847" type=“Private”/>
</markers>
- create an external libriaries of google api using javascript
the code I use is something like this
var customIcons = {
Private: {
icon: ‘…/devel/conf/grp/audition/img/ico/map_pin_red.png’
},
Public: {
icon: ‘…/devel/conf/grp/audition/img/ico/map_pin_green.png’
}
};
function load() {
var map = new google.maps.Map(document.getElementById(“map”), {
//center: new google.maps.LatLng(52.389011, -1.137085),
center: new google.maps.LatLng(43.907787, -79.359741)),
zoom: 9,
mapTypeId: ‘roadmap’
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("../markersXML/markersXML.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
This code is for multiple drop pin on the map, if you have notice above on the step 1 it has called this script by using name 'functionGoogleMaps.js
Hope this help.
Arthur- Been trying to put together an ajax example that would pass longitude/latitiude from JS to php in SC, but so far it’s not working. Will keep trying and post if I have a solution. I don’t think built-in ajax macros will do the trick and interface with Google Maps API.
Aka define a form with two fields
{latitude} and {longitude} then define a javascript button and on execute put the code
//--------------------------------
function showPosition(position){
document.getElementById(‘id_sc_field_latitudine’). value=position.coords.latitude;
document.getElementById(‘id_sc_field_longitudine’) .value=position.coords.longitude;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
// there is an error handle
}
//---------------------------------
on return, on the form fields there are the data that can by used saving on mysql or other thinks
[glo_latitude] = {latitude};
[glo_longitude] = {longitude}
etc…
VDPVince TABLA_1 created a table with two fields LATITUDE and LONGITUDE, I created an application form for that TABLA_1 in ScriptCase and created a button JAVASCRIPT type in the code that button I wrote the code shared
function showPosition(position){
document.getElementById(‘id_sc_field_latitudine’). value=position.coords.latitude;
document.getElementById(‘id_sc_field_longitudine’) .value=position.coords.longitude;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosit ion);
} else {
// there is an error handle
}
when I run the application form the button does nothing; then I tried to place the position data in the form fields to check if they are filled by pressing the button but not so happens, this is what I did:
function showPosition(position){
document.getElementById(‘id_sc_field_latitudine’). value=position.coords.latitude;
document.getElementById(‘id_sc_field_longitudine’) .value=position.coords.longitude;
{latitud} = position.coords.latitude;
{longitud}= position.coords.longitude;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
// there is an error handle
}
I hope I can lend a hand, I am in my first project with SCRIPTCASE.
so is it working for you or not ?