This discussion is archived
5 Replies Latest reply: May 7, 2013 2:27 PM by jsharma RSS

MapViewer and Google Places API

jorono Newbie
Currently Being Moderated
Hello Everybody,

I'm new in the group and no have much experience in Spatial area.

I'm looking for information about the posibility of use google places apis to get point of interest from Oracle Spatial / MapBuilder / MapViewer in order to use point of interest from google with own spatial information.

Any comment is welcome.

Many Thanks
  • 1. Re: MapViewer and Google Places API
    jsharma Pro
    Currently Being Moderated
    Can you provide more details on your use case?

    MapViewer is usually used to query and display spatial information from an Oracle database (i.e. spatial information manged using Oracle Spatial and Graph or Oracle Locator). So if your spatial information is in an Oracle database and in tables/columns using the SDO_GEOMETRY type then use MapViewer to query and display it.

    Google Places API gives access to google's database of POI and other info (like events).

    If you plan use the two together you may want to look at the Oracle Maps javascript API.

    Jayant
  • 2. Re: MapViewer and Google Places API
    jsharma Pro
    Currently Being Moderated
    First, assuming your spatial information is in an Oracle database how do you display it on a background map from some online map service such as Nokia, Bing, Google etc. Steps are: deploy mapviewer, configure a datasource for your oracle db instance with the spatial info, define a theme (using mapbuilder), use the oracle maps javascript api to display the theme on a background map.
    The Oracle Maps tutorial (part of the mvdemo sample application in the Quickstart Kit on OTN here ) is a great starting point.
    Let's assume your spatial data consists of customer locations and you've defined a theme named customers in the mvdemo user. So the relevant javascript code snippets to display that are:
    var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    mapview = new MVMapView(document.getElementById("map"), baseURL);
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.nokia_map"));
    mapview.setCenter(mpoint);
    mapview.setZoomLevel(mapZoom);

    var themebasedfoi = new MVThemeBasedFOI('themebasedfoi1','mvdemo.customers');

    themebasedfoi.setBringToTopOnMouseOver(true);
    mapview.addThemeBasedFOI(themebasedfoi);

    mapview.display();

    You can also use the Oracle Maps javascript API is conjunction with google javascript APIs to search for places via google search and display the results on a mpa (using oracle maps) along with your database content (using oracle maps as above). The google search bit is explained below. It was created years back using an old version (and now probably deprecated) of the google local search API and sample code. So I've no idea if it still works.
  • 3. Re: MapViewer and Google Places API
    jsharma Pro
    Currently Being Moderated
    Don't know how to correctly enter the sample code so that it is display as text but hopefully a pre tag will work. Also this is based on 4 year old sample code and may not work any longer.
    <pre>
    <!--
    copyright (c) 2009 Google inc.

    You are free to copy and use this sample.
    License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
    -->

    <!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; charset=utf-8"/>
    <title>MapViewer with Google AJAX Search API Sample</title>
    <style type="text/css">
    #sidebar {
    float:right;
    width:350px;
    margin-top: 10px;
    margin-right: 4px;
    font-size:10pt;color:green;
    font-family:palatino,tahoma,arial,verdana,sans-serif;
    }
    #message {
    clear:left;
    font-size:10pt;color:#888;
    font-family:verdana,sans-serif;
    }
    #map {
    float:left;
    margin-left: 1%;
    margin-top: 10px;
    margin-right: 4px;
    border-top: 1px solid #BFC6C9;
    border-left: 1px solid #BFC6C9;
    border-right: 1px solid #BFC6C9;
    border-bottom: 1px solid #BFC6C9;
    background-color: white;
    padding-left: 4px;
    padding-top: 4px;
    padding-right:4px;
    padding-bottom:4px;
    }
    </style>
    <script src="http://www.google.com/jsapi"></script>
    <script
    src="http://maps.oracle.com/mapviewer/fsmc/jslib/oraclemaps.js"
    type="text/javascript">
    </script>


    <script type="text/javascript">

    /*
    * How to build a Google Map and bind a SearchControl to it and put markers
    * on the map for each result we receive.
    */

    // First, we have to load the APIs.
    //google.load('maps' , '2');
    google.load('search' , '1');

    // Global variables we will set in OnLoad
    var map;
    var searcher;

    // Second, we set up our function, OnLoad
    function OnLoad() {
    // Get the content div and clear it's current contents.
    var contentDiv = document.getElementById('content');
    contentDiv.innerHTML = ''; // Clear any content currently in the Div

    // Next thing we have to do is build two divs to hold our stuff
    var mapContainer = document.getElementById('map');//document.createElement('div'); // build the map div
    //mapContainer.style.height = '450px'; // set the map height
    //mapContainer.style.width = '550px'; // set the map width
    //mapContainer.id = 'map';

    var controlContainer = document.createElement('div'); // build the control div
    controlContainer.style.width = '350px'; // set the control width
    controlContainer.id = 'sidebar';

    // Now we have to add these divs to the content div in the document body
    //contentDiv.appendChild(mapContainer);
    contentDiv.appendChild(controlContainer);

    var baseURL = "http://maps.oracle.com/mapviewer";
    var centerPoint = MVSdoGeometry.createPoint(-122.4, 37.75, 8307);
    var mapZoom = 11;
    // We're ready to build our map...
    map = new MVMapView(mapContainer, baseURL);
    map.addMapTileLayer(new MVMapTileLayer("elocation_mercator.world_map"));
    map.setCenter(centerPoint);
    map.setZoomLevel(mapZoom);
    map.addCopyRightNote('&copy; 2009 Oracle, Data &copy; 2009 NAVTEQ');

    // ...and add a couple of controls.
    //map.addControl(new google.maps.SmallMapControl()); // Add a small map control
    //map.addControl(new google.maps.MapTypeControl()); // Add the map type control

    // We'll wait to the end to actually initialize the map
    // So let's build the search control
    var searchControl = new google.search.SearchControl();

    // Initialize a LocalSearch instance
    searcher = new google.search.LocalSearch(); // create the object

    searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);

    // set the center of the searcher to that of map
    searcher.setCenterPoint(''+centerPoint.getPointY()+','+centerPoint.getPointX());


    // Create a SearcherOptions object to ensure we can see all results
    var options = new google.search.SearcherOptions(); // create the object
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
    //options.setRoot(document.getElementById("somewhere_else"));

    // Add the searcher to the SearchControl
    searchControl.addSearcher(searcher , options);

    // First set a search starting callback so the current map
    // center becomes the search center
    searchControl.setSearchStartingCallback(searcher , function() {
    var theCenterGeom=null,geomInLatLng=null,centerLng, centerLat;
    theCenterGeom = map.getCenter();
    if (theCenterGeom == null || theCenterGeom.srid == null
    || theCenterGeom.getPointX()==0 || theCenterGeom.getPointY()==0)
    {
    centerLng = -122.4;
    centerLat = 37.75;
    }
    else
    {
    geomInLatLng = map.transformGeom(theCenterGeom,8307);
    centerLng = geomInLatLng.getPointX();
    centerLat = geomInLatLng.getPointY();
    }

    searcher.setCenterPoint(''+centerLat+','+centerLng);
    });
    // And second, we need is a search complete callback!
    searchControl.setSearchCompleteCallback(searcher , function() { 
    map.removeAllFOIs();
    var results = searcher.results; // Grab the results array
    // We loop through to get the points
    for (var k = 0; k < results.length; k++) {
    var result = results[ k ]; // Get the specific result
    var markerLatLng = MVSdoGeometry.createPoint(parseFloat(result.lng),
    parseFloat(result.lat), 8307);
    var markerHtml = result.html.innerHTML;
    var marker = MVFOI.createMarkerFOI('gRes_'+i,markerLatLng,
    'http://maps.oracle.com/elocation/ajax/images/PIN_sm_ena.png',36, 28); // Create the marker
    marker.setInfoWindow(markerHtml,200,150, 'MVInfoWindowStyle1', result.title,null);
    map.addFOI(marker); // add the marker to the map
    }

    // Store where the map should be centered
    var center = MVSdoGeometry.createPoint(
    parseFloat(searcher.resultViewport.center.lng),
    parseFloat(searcher.resultViewport.center.lat),8307);

    // Calculate what the zoom level should be
    /*
    var ne = new google.maps.LatLng(searcher.resultViewport.ne.lat,
    searcher.resultViewport.ne.lng);
    var sw = new google.maps.LatLng(searcher.resultViewport.sw.lat,
    searcher.resultViewport.sw.lng);
    var bounds = new google.maps.LatLngBounds(sw, ne);
    var zoom = map.getBoundsZoomLevel(bounds, new google.maps.Size(350, 350));
    */
    // Set the new center of the map
    // parseFloat converts the lat/lng from a string to a float, which is what
    // the LatLng constructor takes.
    map.setCenter(center);

    });

    // Draw the control
    searchControl.draw(controlContainer);

    // Set the map's center point and finish!
    map.addNavigationPanel('WEST');
    map.display();

    // Execute an initial search
    searchControl.execute('pizza');
    findDivWithClearButton();

    }

    function findDivWithClearButton() {

    var theLscDiv = document.getElementById('sidebar');

    // now scan through divs to find the one for clearing results
    var nodeList = theLscDiv.getElementsByTagName('div');
    var i, aNode;
    for(i=0; i<nodeList.length; i++)
    {
    aNode = nodeList.item(i);
    if(aNode.title==="clear results" && aNode.className==="gsc-clear-button")
    {
    if(aNode.addEventListener)
    {
    //aNode.addEventListener('click',function(){alert('clicked on clear button')}, true);
    aNode.addEventListener('click',function(){map.removeAllFOIs()}, false); }
    else if(aNode.attachEvent)
    {
    //aNode.attachEvent('onclick',function(){alert('clicked on clear button')});
    aNode.attachEvent('onclick',function(){map.removeAllFOIs()});
    }
    break;
    }
    }
    }
    google.setOnLoadCallback(OnLoad);

    </script>

    </head>
    <body style="font-family:Tahoma,Verdana,Arial,sans-serif;border: 0 none;">
    <!-- original lines below commented out for posting here
    <div id="content">Loading...</div>
    <div id="map" style="width:550px;height:450px"></div>
    <div id="message">
    remove comment tags if you're actually going to copy and paste and try it -->
    <p> Perform a Google Local search to see results displayed on the map.

    Sample search terms "parking" or "schools in nashua, nh" or
    "honda dealerships in chicago".

    A search without a location (e.g. "parking")
    is centered at the current map center.

    If a location is specified (
    e.g. pizza in nashua nh or pizza near 42.38,-71.13)

    then the map is centered to
    that location.
    </p></div>
    </body>
    </html>
    </pre>
  • 4. Re: MapViewer and Google Places API
    jorono Newbie
    Currently Being Moderated
    Hello Jayant,

    My researching is about the following scenario:

    OBIEE as BI Application
    Mapviewer as aplication to show the maps
    Google Maps as background map
    Administrative boundaries & customers points in Oracle Database via SDO_GEOMETRY

    Doubt:
    --------
    Google Places as PoI provider


    Business Cases:

    1) My customer want is creatng analysis using customers localization (Latitude, Longitute - in a SDO_GEOMETRY point ) that are in a distance below to 500 mts of any point of Interest for instance.

    2) Same as above but using administrative boundaries.

    3) Paint in a map point of Sales and Point of interest and select in a map some PoS to create a cluster as is showed in ([Sample Data Set for MapViewer Quickstart HTML5 Demos|http://www.oracle.com/technetwork/middleware/mapviewer/downloads/index.html])


    Currently my customer is using this functionallity using just google maps (case 1). The problem is this solution is becoming ungoverned because they have a lot of users and implies many customization.

    The wish of using google places is because google keep "up-to-date" the information and avoid us the manteince of this kind of information.

    Conclusion:
    1) I don't know if it is possible

    2) If yes, do you have any example to this?

    3) If no, There is some solution like this in Oracle Spatial - MapViewer roadmap

    4) In other case, I think one solution is incorporate the point of interest into oracle tables, there is any other?

    Many many thanks and regards

    PS: Jayant I will send you an invitation via linkedin to keep in contact
  • 5. Re: MapViewer and Google Places API
    jsharma Pro
    Currently Being Moderated
    See examples in the OBIEE SampleApp. Specifically the Business in distance range in 8.11 Oracle Spatial dashboard.

    You'd use a variant of that in your case. I'd suggest contact Albert Godfrind for help if you know him or some Oracle BI pre-sales folks.

    Doing this mapviewer is simple. Get the POIs from google places display on a map as MV FOI. User clicks on a POI get that foi's geometry pass it to your theme as a bind variable. The theme itself is defined as a spatial query (using sdo_within_distance) with a bind variable. Something like
    SQL> select styling_rules from user_sdo_themes where name = 'CUSTOMER_NEARBY';
    STYLING_RULES
    --------------------------------------------------------------------------------

    <?xml version="1.0" standalone="yes"?>
    <styling_rules>
    <hidden_info>
    <field column="NAME" name="Name"/>
    <field column="ACCOUNT_MGR" name="Account Mgr"/>
    <field column="SALES" name="Sales"/>
    </hidden_info>
    <rule>
    <features asis="true" style="M.ALL_CITY_L1_8X8"> (sdo_within_distance(location,:1,'distance=500 unit=meter')='TRUE') </features>
    <label column="ACCOUNT_MGR" style="T.BLUE_SERIF_10"> 1 </label>
    </rule>
    </styling_rules>

    You'd use foi.getGeometry() to get the location clicked on and then pass that it to the theme as a query parameter
    var themebasedfoi2 = new MVThemeBasedFOI('themebasedfoi2','mvdemo.customers_nearby');
    theGeom= foi.getGeometry;
    themebasedfoi2.setQueryParameters(theGeom);

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points