This week see thread from Keith I promised to "whip up"an example of a map layout as required in the thread. After playing around with the code made available by Google labs. I came up with this example, as can be seen in attached database. This is based upon the V9 Web Content form from within the AlphaSports Example and contains only the customer database with a dummy Menu Form and a revised V9 Web Content form based upon the tweaking of the Map API available. There is also a A5 page which when opened in the HTML Editor in Source mode contains all the neccessary code to implement such a page on any web server.
The only requirement is to supply the "Key=" value which can be obtained from this link Google API
To obtain the required map in the HTML page I have implemented the same google URL parameter type "?q=". This simplifies the query construction from within the A5V9 form design supercontrol genie
This is achiveid by the following javascript function:
The varariable is referenced as "q_param" and if no error occurs it produces the required geocoder call string.
Limitations:
The image div container can only be defined in pixels and not "%" so it requires some tweaking to obtain the required image size for the the form element in question . Take into account window size, Anchor points, Screen Size and resolution.
The API key is relative so always request root domain address i.e http"//somewhere.com and not was.somewhere.com. The geocoder request calls are currently restricted to 25000 request per key per day.
On this note it would be wise to tweak the API to return the geocoder info one time for each address and then store this info as a character string in the same datatable as used in the application to show the maps.
A function could be written to obtain all the required geostats required and then as layed out in the API Documentation (Very well layed out and simple to follow)be returned in a single file format which could be parsed accordingly and stored the A5V9 table field. Later any map requests could be used using the relevant geostat paramenters which greatly reduces the network overhead to obtain the map.
Further Improvements:
The API is rich in fuctionality and can allow many customisations such as local searches from within the map image and also layers which can produce numerous effects such as route layouts and radial searches, tag inclusions and cached results .
All in all it was a pleasure researching this "tweak", mainly due to the documentation that is readily available. Don't any of you think that I am "WEB GEEK" I normally avoid coding of this type .
The only requirement is to supply the "Key=" value which can be obtained from this link Google API
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> AV9 Layouts as seen in this screen shot the ActiveX Browse configuration genie can be adapted to use your web page along the same query expression format as the google template supplied in A5V9: [IMG]http://bellsinisrael.com/template.jpg[/IMG] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA5zimVReFlYXk2cEGwIMLWBRpn_6bnnYaPzolxsoN1kXNJgZiLBTvzzqzgTOydXsPW4VsB4k7kLeozg" type="text/javascript"></script> <script type="text/javascript"> function gup( name ) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return results[1]; } function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); var q_param = gup('q'); geocoder.getLatLng( q_param, function(point) { if(!point) { alert(q_param + "not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); //marker.openInfoWindowHtml(address); // Opens info window map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); } } ); } } </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 800px; height: 600px"></div> </body> </html>
This is achiveid by the following javascript function:
HTML Code:
<script type="text/javascript">
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) return ""; else return results[1];
}
Limitations:
The image div container can only be defined in pixels and not "%" so it requires some tweaking to obtain the required image size for the the form element in question . Take into account window size, Anchor points, Screen Size and resolution.
The API key is relative so always request root domain address i.e http"//somewhere.com and not was.somewhere.com. The geocoder request calls are currently restricted to 25000 request per key per day.
On this note it would be wise to tweak the API to return the geocoder info one time for each address and then store this info as a character string in the same datatable as used in the application to show the maps.
A function could be written to obtain all the required geostats required and then as layed out in the API Documentation (Very well layed out and simple to follow)be returned in a single file format which could be parsed accordingly and stored the A5V9 table field. Later any map requests could be used using the relevant geostat paramenters which greatly reduces the network overhead to obtain the map.
Further Improvements:
The API is rich in fuctionality and can allow many customisations such as local searches from within the map image and also layers which can produce numerous effects such as route layouts and radial searches, tag inclusions and cached results .
All in all it was a pleasure researching this "tweak", mainly due to the documentation that is readily available. Don't any of you think that I am "WEB GEEK" I normally avoid coding of this type .
Comment