Mashup Oracle Maps und Google Maps (3)

Nachdem wir im Teil (2) der Mashup Serie dynamische POI's aus dem mvdemo - Schema aktiviert haben, möchte ich nun den Aufruf von Google Maps aus Oracle Maps erklären. Hierbei wird, wie bereits im Beitrag zu Detail Maps .. gezeigt, in Oracle Maps ein InfoWindow mit IFRAME und der URL zu der Google Maps Applikation aufgerufen:


Dabei werden die Koordinaten des Mausklick und die Zoomstufe übermittelt und
in Google Maps in der setCenterMap Function gesetzt:


Die POI Infos sehen wir in Oracle Maps :



und natürlich auch in Google Maps:



Viel Spaß mit den Mashups!
Friedhold

Google Maps Mashup mit AJAX - PL/SQL- DAD (2)

Nachdem wir im Teil 1 die Funktionsweise des Google Maps Clients anhand der XML-Datei nachgewiesen haben, ersetzen wir im Teil 2 die XML-Datei durch den bewährten PL/SQL-DAD Zugriff.

Im mvdemo - Schema implementieren wir folgende Procedure zur serverseitigen Bereitstellung der AJAX-Daten:



Diese Procedure testen wir mit der URL: http://localhost:7777/pls/mvdemo/PLSQLAJAX_GENXML_CA

und erhalten die bereits mit der XML-Datei aus Teil 1 simulierten Daten, nun jedoch im dynamischen PL/SQL - Zugriff:



Im Teil 1 erfolgte der Funktionsnachweis der AJAX-Clientseite und jetzt können wir die dynamischen XML-Daten aus der Datenbank visuell verifizieren.
So brauchen wir nur noch die Datenquelle in der GDownloadUrl - Funktion auswechseln:

GDownloadUrl("http://localhost:7777/pls/mvdemo/plsqlajax_genxml_ca", function(data) { .. }
//GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) { .. }

und wir erhalten:



Einfacher geht es eigentlich nicht, zumal mit dem PL/SQL-DAD Zugriff die performanteste Technologie angewendet wird.

Friedhold

Google Maps POI's mit AJAX - XML-Datei (1)

Die Möglichkeit zur Integration von Oracle Maps und Google Maps, sogenanntes Mashup, möchte ich mit der Darstellung von "Points of Interest" (POI) in Google Maps auf Basis des Oracle-DB - Zugriffes beginnen.
Der serverseitige Datenzugriff für AJAX-Clients wird häufig mit Java Servlets, PHP oder neuerdings mit Ruby on Rails realisiert.

Oracle stellt mit dem PL/SQL Toolkit, sozusagen im Database Core, umfangreiche HTTP-Funktionen bereit, mit denen sich AJAX und PL/SQL Datenzugriffe recht elegant verbinden lassen. Letztendlich werden diese Funktionen u.a. in APEX angewendet. Die APEX Community hat zum Thema APEX und AJAX eine sehr gut nachvollziehbare TODO-Folge veröffentlicht.

Mit der AJAX-Technologie können Datenschnittstellen abgefragt werden, die sinnvollerweise Daten in einem für Javascript gut verarbeitbarem Format, z.B. in XML oder JSON, liefern.
Zur Entwicklung des AJAX-Clients habe ich die Daten der POI's im XML- Format bereitgestellt:



Diese Datei (plsql_genxml.xml) legt man unter:%ORACLE_HTTP_SERVER%\Apache\Apache\htdocs ab, die URL zu dieser Adresse lautet: http://localhost:7777/plsql_genxml.xml .

Nun kann man mit der Google Maps - Function :

GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) { .. }

die XML-Daten lesen:



Die Google Maps Seite wird unter : %ORACLE_HTTP_SERVER%\Apache\Apache\htdocs abgelegt und der Start erfolgt mit der URL: http://localhost:7777/plsqlajax_gmap.html

Der Javascript - Code ist sehr kompakt, übersichtlich und gut lesbar:

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        //map.addControl(new GSmallMapControl());
        //map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl()) ;
        map.addControl(new GOverviewMapControl()) ;
        
        // Logging
        var sTemp = self.location.href 
        GLog.write(sTemp);
      
        map.setCenter(new GLatLng(37.7725, -122.39607), 13);
        
        map.enableScrollWheelZoom();
        
        //GDownloadUrl("http://localhost:7777/pls/mvdemo/plsqlajax_genxml_ca", function(data) {
        GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) {
          var xml = GXml.parse(data);
          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 GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            // Logging 
            GLog.write(point+ " / " + address + " / " + type );
            map.addOverlay(marker);
          }
        });
        
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, {title: name, icon: customIcons[type]} );
      var html = name + " / " + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
..

Das Ergebnis sieht dann in Firefox und Firebug so aus:



Die gelieferten Daten können im Google Logger und in der Response - Ausgabe des Firebug betrachtet werden.

Friedhold