Oracle APEX Cookbook（Second Edition）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Including Google Maps>

In your APEX application it is possible to include a Google map. A Google map can be very useful, for example, for contact details or directions. It is not only simple to include a map, but you can also extend the map with several functions. In former releases of APEX, you needed to create a PL/SQL dynamic region with JavaScript embedded in the PL/SQL code. Since APEX 4.0, you can use plug-ins. We will show you how to include the Google map with plug-ins. In this recipe we will create a Google map with markers representing the locations from the APP_CUSTOMERS table.

Getting ready

Make sure you have access to the APP_CUSTOMERS table. Also, make sure you have an API key to get the Google map working. If you haven't got any, request one at https://developers.google.com/maps/documentation/javascript/tutorial?hl=nl#api_key.

How to do it...

First of all, you have to define a plug-in.

  1. In the Application Builder, go to your application and click on the Shared Components icon.
  2. In the User Interface section, click on the Plug-ins link.
  3. Click on the Create button.
  4. In the Name section, enter a name in the Name text field, for example Google map.
  5. In the Internal Name text field, enter a unique name. If you want to make your plug-in publicly available, this name must be unique worldwide. In that case, it is advisable to use your company's fully qualified domain name reversed. For example com.packtpub.apex.google_map.
  6. In the Type listbox, select Region.
  7. Click on the Create button. The plug-in has now been created and now we must define the attributes.
  8. In the Custom Attributes section, click on the Add Attribute button.
  9. In the Name section, enter Width in the Label text field.
  10. In the Settings section, select Integer in the Type listbox.
  11. Select Yes in the Required listbox.
  12. In the Display Width text field, enter 4, and in the Maximum Width text field, enter 4.
  13. In the Default Value textarea, enter 600.
  14. Click on Create And Create Another.
  15. In the Name section, enter 2 in the Attributes text field.
  16. Enter Height in the Label text field.
  17. In the Settings section, select Integer in the Type listbox.
  18. Select Yes in the Required listbox.
  19. In the Display Width text field, enter 4 and in the Maximum Width text field, enter 4.
  20. In the Default Value textarea, enter 400.
  21. Click on Create.

The attributes have now been defined. Now we will enter the code which is needed to display the Google map.

  1. In the Source section, enter the following code in the PL/SQL Code textarea: 
    function render_google_map (
   p_region              in apex_plugin.t_region,
   p_plugin              in apex_plugin.t_plugin,
   p_is_printer_friendly in boolean )
return apex_plugin.t_region_render_result
is
cursor c_cmr is
   select cust_street_address1||', '||cust_city geoloc
   from   app_customers
   where  cust_street_address1 is not null
   order by customer_id;    
--
l_width      apex_application_page_regions.attribute_01%type := p_region.attribute_01;
l_height     apex_application_page_regions.attribute_02%type := p_region.attribute_02;
l_code       varchar2(32000);
i            number(3) := 0;
begin
apex_javascript.add_library (
   p_name           => 'maps?file=api& v=3&key=YOURKEY',
   p_directory      => 'http://maps.google.com/',
   p_version        => null,
   p_skip_extension => true );
--
sys.htp.p('<div id="'||p_region.static_id||'_map" style="width:'||l_width||'px; height:'||l_height||'px"></div>');      
--
l_code := 'var map = null;
   var geocoder = null;
   if (GBrowserIsCompatible()) {
   map = new GMap2($x("'||p_region.static_id||'_map"));
   map.setCenter(new GLatLng(36.902466,-84.202881), 5);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   geocoder = new GClientGeocoder();';
--
for r_cmr in c_cmr
loop
   l_code := l_code || 'geocoder.getLatLng(' ||''''||
      r_cmr.geoloc ||''''||','|| 
      'function(point) {
         var baseIcon = new GIcon(G_DEFAULT_ICON);
         baseIcon.shadow = 
         "http://www.google.com/mapfiles/shadow50.png";
         baseIcon.iconSize = new GSize(20, 34);
         baseIcon.shadowSize = new GSize(37, 34);
         baseIcon.iconAnchor = new GPoint(9, 34);
         baseIcon.infoWindowAnchor = new GPoint(9, 2);
         var letteredIcon = new GIcon(baseIcon);
         letteredIcon.image = "http://www.google.com
         /mapfiles/marker'||chr(65+i)||'.png";
         markerOptions = { icon:letteredIcon };
         var marker = new GMarker(point,markerOptions);
         map.addOverlay(marker);
         });';
   i := i + 1;
end loop;
--
l_code := l_code || '}';
--
apex_javascript.add_onload_code (p_code => l_code);
--
return null;
end render_google_map;
[9672_03_12.txt]

    Replace YOURKEY by your own Google API key. This code will be explained in the next paragraph.

  2. In the Callbacks section, enter render_google_map in the Render Function Name text field.
  3. Click on the Apply Changes button. The plug-in has been created and can now be used within our web page.
  4. In the Application Builder, go to your application.
  5. Click on the Create Page button.
  6. Select Blank Page.
  7. In the Page Alias text field, enter a name, for example, Google map, and click on Next.
  8. Enter a name for the page and click on Next.
  9. Select No Tabs and click on Next.
  10. Click on the Finish button to confirm.

The page has now been created. Now you can create a region with the Google map:

  1. Click on Edit Page.
  2. In the Regions section, click on the Add icon to create a new region.
  3. Select Plug-ins.
  4. Select the plug-in you just created and click on Next.
  5. Enter a title for the region and click on Next.
  6. In the next step, enter the width and the height of the map. The default values are shown but you can enter other dimensions. Click on Next.
  7. Click on the Create Region button.

Now the region with a Google map has been created. To show the actual addresses of the markers, we will now create a Reports region.

In the Regions section, click on the Add icon.

  1. Select Report and click on Next.
  2. In the Report Implementation dialog, select Classic report.
  3. Enter a title for this region, for example Locations. Alternatively, you can select 2 in the Column listbox if you want to display the report next to the map. Click on Next.
  4. In the Query textarea, enter the following query: 
    select chr(64+rownum) label
,      cust_first_name
,      cust_last_name
,      cust_street_address1
,      cust_city
,      cust_state
,      cust_postal_code
from app_customers
order by customer_id
[9672_03_13.txt]
  5. Click on the Create Region button.
  6. The page is now ready. Run the page to see the result as shown in the following screenshot:

How it works...

For this recipe we make use of a region type plug-in. The plug-in contains the code to put a map in the region. This is a PL/SQL code with JavaScript embedded. The JavaScript code is the actual code to put the map on the screen.

The function render_google_map starts with a cursor with the query on table app_customers. The street address and the city are concatenated so that this can be used in the JavaScript code. In the Declare section you also see the attributes which were created with the plug-in: width and height. They are referenced using the apex_plugin types.

The code starts with a call to apex_javascript.add_library. In this call, the URL for the Google map is built. The next step is the creation of a div. This div is given an ID and this ID will be remembered so that the Google Maps API can put the map in this div. In the div, the width and the height attributes are used to define the size of the map.

In the JavaScript code, a new map is created with the generated ID. This map is centered using the map.setCenter command where the coordinates and the zoomlevel are set. The map.addControl command sets the navigational buttons and the zoombuttons on the upper-left corner of the map. The geocoder is used to search the location which is fetched from the query. This is done with the geocoder.getLatLng function. The baseicon functions define the markers on the map. For every character there is an image available on www.google.com. For example, if you want to put a marker with the letter A on the screen, use http://www.google.com/mapfiles/markerA.png.

The map.addOverlay function sets the marker on the map.

This JavaScript code is put in a variable and will be used in the call to apex_javascript.add_onload_code.

There's more...

The Google Maps API offers a lot of possibilities. You can make markers clickable so that a balloon with the location details will be shown. You can also use overlay functions such as a path which graphically connects locations with a colored line. For more information take a look at the Google Maps API website.

See also

上一章目录下一章