www.webdeveloper.com
Results 1 to 6 of 6

Thread: JSONP Google Maps Engine Interface

Hybrid View

  1. #1
    Join Date
    Sep 2006
    Location
    Ipswich
    Posts
    88

    JSONP Google Maps Engine Interface

    I am trying to create a worldwide store locator using the following example:

    http://storelocator.googlecode.com/git/index.html - see example 2 titled "dynamic".

    My aim is to upload a CSV file for each country that I need to present a store locator (I understand GME converts the CSV's into Vector Tables), so that we can periodically update the store locations for a particular country, without having to replace a large vector table holding all of our store locations. My aim is to create a layer per country and assign a CSV/vector table to that layer. However I am having problems with this approach. My problem is twofold, on top of the fact that I have limited experience with JSONP:

    1) Within the GME web interface although I can upload a CSV which is processed into vector table assigned to a particular layer (which becomes a Vector Layer - which can be searched by the store locator to find store locations). I can then run queries so that the store locator returns results as expected. If I try to add a second layer, I don't have an option to specify that layer as being a vector layer, only image or terrain is available to choose. If I upload a new CSV I can't assign it to another layer.

    2) Within the code that I have taken as an example, the file queries one specified vector table. If I were able to create multiple layers and assign a vector table to each of them, how could the script be modified to query an array of table rather than just one table?

    Code:
    function MedicareDataSource() {
    }
    
    MedicareDataSource.prototype.getStores = function(bounds, features, callback) {
      var that = this;
      var center = bounds.getCenter();
      var audioFeature = this.FEATURES_.getById('Audio-YES');
      var wheelchairFeature = this.FEATURES_.getById('Wheelchair-YES');
    
      var where = '(ST_INTERSECTS(geometry, ' + this.boundsToWkt_(bounds) + ')' +
          ' OR ST_DISTANCE(geometry, ' + this.latLngToWkt_(center) + ') < 20000)';
    
      if (features.contains(audioFeature)) {
        where += " AND Audio='YES'";
      }
      if (features.contains(wheelchairFeature)) {
        where += " AND Wheelchair='YES'";
      }
      //VARIABLE TO QUERY ONE SPECIFIC TABLE
      var tableId = '12421761926155747447-06672618218968397709';
      var url = 'https://www.googleapis.com/mapsengine/v1/tables/' + tableId +
          '/features?callback=?';
    
      $.getJSON(url, {
        key: 'AIzaSyAtunhRg0VTElV-P7n4Agpm9tYlABQDCAM',
        where: where,
        version: 'published',
        maxResults: 300
      }, function(resp) {
        var stores = that.parse_(resp);
        that.sortByDistance_(center, stores);
        callback(stores);
      });
    };
    It has crossed my mind that I am going about this in the wrong way, but the method I am using satisfies the requirements of the project manager, however if there is a more practical way to achieve the desired results, I am definitely open to advice.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    would it not be feasible to pass the table ID in as a parameter of the getStores function, thus creating a new table each time the function is called?

  3. #3
    Join Date
    Sep 2006
    Location
    Ipswich
    Posts
    88
    Quote Originally Posted by xelawho View Post
    would it not be feasible to pass the table ID in as a parameter of the getStores function, thus creating a new table each time the function is called?
    Hi there! As far as I am aware the table ID is set by the Google Maps Interface (which also creates the tables when you upload a CSV and an associated table ID). So I'm not sure how passing the table ID as part of the getStores function would work, as you need the table ID to be present in order to query a specific table for the rest of the data that the getStores function evaluates. So for instance if table id:

    12421761926155747447-06672618218968397709 is a table with Australian Stores,
    06672618218968397709-12421761926155747447 would represent a table with stores in the United Kingdom for example.

    When getStores is run, how would I know which table_ID to pass getStores? I could end up with 50+ tables? Maybe I am missing the point?

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    no, I think it's more likely that I'm missing the point, or not really understanding the flow of your code.

    I guess without seeing absolutely everything, the relevant questions would be:

    - How is getStores called? programatically or through user interaction?
    - I'm assuming that you want to load a specific set of results (ie, a table) as a result of user interaction. What would this look like? A select box, or text input? Either way, that's where I'm thinking that you would pass the table ID to the function. Of course, it would be up to you to structure your data so that you know which table to load, but in the given example for instance, and using a select you could do something like this:
    Code:
    <select onchange="getStores(bounds, features, callback, this.value)">
        <option value="">Choose Location</option>
        <option value="12421761926155747447-06672618218968397709">Australia</option>
        <option value="06672618218968397709-12421761926155747447">UK</option>
      </select>
    
    
    <script type="text/javascript">
    MedicareDataSource.prototype.getStores = function(bounds, features, callback, tableId) {
    //other stuff
    //VARIABLE TO QUERY ONE SPECIFIC TABLE
      var url = 'https://www.googleapis.com/mapsengine/v1/tables/' + tableId +
          '/features?callback=?';
    //etc	  
    }
    all that depending on the rest of your code, how and when you define bounds, features & callback, etc

  5. #5
    Join Date
    Sep 2006
    Location
    Ipswich
    Posts
    88
    Quote Originally Posted by xelawho View Post
    no, I think it's more likely that I'm missing the point, or not really understanding the flow of your code.

    I guess without seeing absolutely everything, the relevant questions would be:

    - How is getStores called? programatically or through user interaction?
    - I'm assuming that you want to load a specific set of results (ie, a table) as a result of user interaction. What would this look like? A select box, or text input? Either way, that's where I'm thinking that you would pass the table ID to the function. Of course, it would be up to you to structure your data so that you know which table to load, but in the given example for instance, and using a select you could do something like this:
    Code:
    <select onchange="getStores(bounds, features, callback, this.value)">
        <option value="">Choose Location</option>
        <option value="12421761926155747447-06672618218968397709">Australia</option>
        <option value="06672618218968397709-12421761926155747447">UK</option>
      </select>
    
    
    <script type="text/javascript">
    MedicareDataSource.prototype.getStores = function(bounds, features, callback, tableId) {
    //other stuff
    //VARIABLE TO QUERY ONE SPECIFIC TABLE
      var url = 'https://www.googleapis.com/mapsengine/v1/tables/' + tableId +
          '/features?callback=?';
    //etc	  
    }
    all that depending on the rest of your code, how and when you define bounds, features & callback, etc
    Actually I get your point now if I had a select list I could pass the table ID as the value of the option selected. However, I don't have a select list, and the requirements of the project are that everything should be auto detected, i.e. what country the user is in, and also what country the user wants to search (by field input). However, this may not be possible, so I can see why the select list would be a good idea.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,084
    well if you know the table IDs in advance and the countries they correspond to (and surely you do?) you could make a simple lookup table, pass the country name into the function after it has been detected or selected by user input and grab the ID that way:

    Code:
    MedicareDataSource.prototype.getStores = function(bounds, features, callback, country) {
    //other stuff
    
    var IDs ={
    "Australia":"12421761926155747447-06672618218968397709",
    "UK":"06672618218968397709-12421761926155747447"
    }
    
    var tableId=IDs[country];
    
    //VARIABLE TO QUERY ONE SPECIFIC TABLE
      var url = 'https://www.googleapis.com/mapsengine/v1/tables/' + tableId +
          '/features?callback=?';
    //etc	  
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles