In this lesson we want to make a new window with an INPUT SCREEN FORM and a Google Map window to display any streets, cities, zip codes or countries.
Example:
DATABASE FORMONLY
SCREEN
{
Street: [mx1 ]
City: [mx2 ]
Zipcode: [mx3 ]
Country: [mx4 ]
}
ATTRIBUTES
mx1 = FORMONLY.street;
mx2 = FORMONLY.city;
mx3 = FORMONLY.postalcode;
mx4 = FORMONLY.country;
Save it as e.g.: “googlemaps.per”.
Create a new file “googlemaps.4gl” and create a new window for our API.
DEFINE street CHAR(255),
city CHAR(255),
postalcode CHAR(50),
country CHAR(255)
MAIN
CALL ui.Interface.LoadStyles(”default”)
CALL ui.Interface.loadActionDefaults(”defaultactions”)
OPEN WINDOW w_1_1 WITH FORM “googlemaps”
CALL ui.Interface.setText(”Google Maps”)
DISPLAY BY NAME street,
city,
postalcode,
country
MENU “Navigation”
COMMAND “Edit”
CALL new()
COMMAND “Search”
CALL googlemaps(street CLIPPED, city CLIPPED, postalcode CLIPPED, country CLIPPED)
COMMAND “Exit”
EXIT MENU
CLOSE WINDOW w_1_1
END MENU
# create display forms from m_maps.per
DISPLAY BY NAME street,
city,
postalcode,
country
END MAIN
FUNCTION new()
INPUT BY NAME street,
city,
postalcode,
country
END INPUT
END FUNCTION
We have now created a window with a function that makes “Street”,”City”, “Zpcode” and “Country” editable.
If you click “Search” then the function “googlemaps()” will be called.
Your screen form should now look like this:
The next step is creating a new file named “googemaps_show.4gl” to process the input.
FUNCTION googlemaps(str, city, plz, nr_country)
DEFINE url CHAR(500),
cnt SMALLINT,
str CHAR(100),
city CHAR(50),
plz CHAR(50),
nr_country CHAR(50),
param_street CHAR(100),
param_city CHAR(50),
param_cntry CHAR(50),
param_postcode CHAR(10)
# Define parameter for the url
LET param_street = “street=”
LET param_city = “city=”
LET param_cntry = “country=”
LET param_postcode = “postcode=”
LET cnt = “0″
LET url = “http://www.ventas.de/vdc/vdcmap.php?”
#Remove the Backslashes and set a & behind the word
IF str IS NOT NULL
THEN LET url = url CLIPPED, param_street CLIPPED, str CLIPPED
LET cnt = “1″
END IF
IF city IS NOT NULL
THEN IF cnt = “1″
THEN LET url = url CLIPPED, “&”
END IF
LET url = url CLIPPED, param_city CLIPPED, city CLIPPED
LET cnt = 1
END IF
IF plz IS NOT NULL
THEN IF cnt = “1″
THEN LET url = url CLIPPED, “&”
END IF
LET url = url CLIPPED, param_postcode CLIPPED, plz CLIPPED
LET cnt = “1″
END IF
IF nr_country IS NOT NULL
THEN IF cnt = “1″
THEN LET url = url CLIPPED, “&”
END IF
LET url = url, param_cntry CLIPPED, nr_country CLIPPED
LET cnt = “1″
END IF
# Create a new Window and Display the Google Map API
OPEN WINDOW w_1_2 WITH FORM “googlemaps”
CALL ui.Interface.setText(”Google Maps API”)
DISPLAY BY NAME url
MENU “Google Maps”
COMMAND “exit”
EXIT MENU
END MENU
CLOSE WINDOW w_1_2
END FUNCTION
This example source code can be compiled with “4glpc mainwindow.4gl googlemaps.4gl -o google.4ae”.
The “Main Window” must be linked to run this source or create a new window! And now we need a new SCREEN FORM to display the Google output. Create a new file called “googlemaps_show.per”
DATABASE im_ex
LAYOUT
VBOX
GRID
{
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
[b ]
}
END
END
ATTRIBUTES
Browser b = FORMONLY.url;
INSTRUCTIONS
DELIMITERS ” ”
You can compile this SCREEN FORM with “fcompile -xml googlemaps.per” and see the result below:
To send the input to the Google Webserver we need a new file named “googleapi.php” with javascript as its program language.
<!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”>
<head>
<meta http-equiv=”content-type” content=”text/html; “/>
<title>VENTAS DESKTOP CLIENT MAP</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=”
type=”text/javascript”>
<script src=”http://maps.google.com/maps?file=api&v=2&key=”
type=”text/javascript”>
<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=” type=”text/javascript”>
<script type=”text/javascript”>
var localSearch = new GlocalSearch();
var map;
var icon = new GIcon();
icon.image = “http://www.google.com/mapfiles/marker.png”;
icon.shadow = “http://www.google.com/mapfiles/shadow50.png”;
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
function callback() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
map.setCenter(point, 13);
var marker = new GMarker(point,icon);
map.addOverlay(marker);
} else {
var point = new GLatLng(0,0);
map.setCenter(point, 20);
}
}
function executeSearch(searchstring) {
localSearch.setSearchCompleteCallback(null,callback)
localSearch.execute(searchstring);
}
function load() {
if (GBrowserIsCompatible()) {
map= new GMap2(document.getElementById(”map”));
map.addControl(new GLargeMapControl());
<?php
$searchstring .= $_GET["street"];
$searchstring .= ” “;
$searchstring .= $_GET["city"];
$searchstring .= ” “;
$searchstring .= $_GET["postcode"];
$searchstring .= ” “;
$searchstring .= $_GET["country"];
echo “executeSearch(\”". $searchstring .”\”);”;
?>
}
}
</script>
</head>
<body bgcolor=”#edeceb” onload=”load()” onunload=”GUnload()” style=”margin-top: 0px; margin-left: 0px;”>
<div id=”map” style=”width: 800px; height: 600px; margin-left: 0px; margin-top: 0px;”>Please Wait…</div>
</body>
</html>
Now we have made all our needed files and you can upload the googleapi.php to your web server.
If you have uploaded this file please edit the following line in the googlemaps_show.php:
LET url = “yourdomain.com/googleapi.php?”
Congratulations, you have completed this example! Good work!
