Select to view content in your preferred language

esri.request to google places

1208
1
06-29-2012 07:15 AM
MichaelPorter1
Occasional Contributor
Hi,

I'm trying to make a request to the Google Places API, but I get the following error message:

"Unable to load http://gisbedit100/proxy/proxy.jsp?https://maps.googleapis.com/maps/api/place/search/json?location=3...<My Key> status:403"

I am using ESRI JS API 3.0.  The Code is below where <My Key> is my google places api key:


               var proxyHandler = esri.request({
                    url: "https://maps.googleapis.com/maps/api/place/search/json",
                    content: {
                        location: "38.196612153051745,-85.64023545758986",
                        rankby: "distance",
                        name: "restaurant",
                        sensor: "false",
                        key: "<My Key>"
                    },
                    handleAs: "json",
                    callbackParmName: "callback"
                }, { useProxy: true });
                proxyHandler.then(function(content) {
                    var hold = 1;
                },
                function(error) {
                    var hold = 1;
                });

I am sure that the search request is formatted properly and the my proxy page is working.  I was wondering if it might be a https:// issue, but according to the release notes for JS API 3.0 "NIM081360: esri.request should switch to https when error is "403: SSL is required" ".  Not sure if this makes a difference.  Any help is appreciated.

Thanks.
0 Kudos
1 Reply
KellyHutchins
Esri Notable Contributor
I ran a quick test with code very similar to yours and it worked for me. Here's my test code:

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <style type='text/css'>
      body{
        padding:0;
        margin:0;
      }
      html,body,#map,#mainView{
        height:100%;
      }
      #navPane{
        display:none;
      }
    </style>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type='text/javascript'>
      dojo.require("esri.map");
      dojo.require("esri.tasks.geometry");
      
      dojo.addOnLoad(init);
      var map,geometryService;
      var placesKey='Google Key';
      
      function init(){
        
        esri.config.defaults.io.proxyUrl  = 'http://localhost/~kell3008/proxy/proxy.php';
        geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        
        var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
        window.addEventListener(orientationEvent, function() {
          orientationChanged();
        }, false);

        map = new esri.Map('map');
 
          //find location
          if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(location){
              
              var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(location.coords.longitude, location.coords.latitude));
              var symbol = new esri.symbol.PictureMarkerSymbol({"angle":0,"xoffset":0,"yoffset":0,"type":"esriPMS","url":"http://static.arcgis.com/images/Symbols/Shapes/BlueStarLargeB.png","contentType":"image/png","width":18,"height":18});

              graphic = new esri.Graphic(pt, symbol);
              map.graphics.add(graphic);      
              map.centerAndZoom(pt,14);
              var loc = location.coords.latitude + ',' + location.coords.longitude;
              findPlaces(loc);
              
              //display accuracy 
              var params = new esri.tasks.BufferParameters();
              params.geometries = [pt];
              params.distances = [location.coords.accuracy]; //accuracy in meters 
              params.unit = esri.tasks.GeometryService.UNIT_METER;
     
              params.outSpatialReference = map.spatialReference;
              geometryService.buffer(params,function(results){
                 if(results.length > 0){
                    var symbol = new esri.symbol.SimpleFillSymbol();
                    symbol.setColor(new dojo.Color([100,100,100,0.25]));
                    symbol.setOutline(null);
                    var graphic = new esri.Graphic(results[0],symbol);
                    map.graphics.add(graphic);
                 }
              });
            },function(positionerror){
              switch(positionerror.code){
                case 0:
                  console.log("Unknown error occurred");
                  break;
                case 1: 
                  console.log("Permission denied");
                  break;
                case 2: 
                  console.log("Unable to find current location");
                  break;
               case 3:
                console.log("Location request timed out");
                break;
              }
            });
          }

        
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer');
        map.addLayer(basemap);
      }
      
      function orientationChanged(){
        if(map){
          map.reposition();
          map.resize();
        }
      }
      function findPlaces(location){
        var placesUrl = 'https://maps.googleapis.com/maps/api/place/search/json';
        var params ={
            location:location,
            sensor:false,
            radius:5000,
            types:'book_store',
            key:placesKey,
        }
      
      var places = esri.request({
        url:placesUrl,
        content:params,
        handleAs:'json'
      });
      places.then(requestSucceeded,requestFailed);
      
  }
  
  function requestSucceeded(response){
    dojo.forEach(response.results,function(result){
              var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(result.geometry.location.lng, result.geometry.location.lat,new esri.SpatialReference(4326)));
              console.log(result);
 
              var attr = {'name':result.name,'address':result.vicinity};
              var symbol = new esri.symbol.PictureMarkerSymbol({"angle":0,"xoffset":0,"yoffset":0,"type":"esriPMS","url":result.icon,"contentType":"image/png","width":16,"height":16});
                var infoTemplate = new esri.InfoTemplate('Books',"${*}");
              graphic = new esri.Graphic(pt, symbol,attr,infoTemplate);
              map.graphics.add(graphic);      

    })
    
  }
  function requestFailed(response){
    console.log(response);
  }
    </script>
  </head>
  <body class='claro'>
    <div id='mainView' dojoType='dojox.mobile.View' selected='true'>
      <div id='map'></div>
    </div>
  </body>
</html>

0 Kudos