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:
[download id=”1507”]
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.
VENTAS DESKTOP CLIENT MAP
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());
} }
Please Wait…
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!