Street View Static API

[Heidi Vuletich]

Hi all, 

I am trying to embed static images from Google's Street View in my IAT task. Here's the documentation from Google: https://developers.google.com/maps/documentation/streetview/overview

I have an API key and have set up everything through a Cloud account, but I don't know how to embed the images. I've tried just copying and pasting the URL link in the places where I would usually call an image from the Images folder, but that did not work. 

Thank you,

Heidi

[Yoav Bar-Anan]

Hi Heidi, 

I don't know the answer, but I suspect the question does not include enough details for most of us to be able to help. 

First, it might help if you share the code you're using to show *any* background image. This is not something we have ever done, but I recall that Elad showed you how to modify the code to achieve that. Could you please share that code? For instance, send us a link to a file, to the study, or the code pasted here)

Second, have you been able to get the Google Street View image with your API key outside Minno? 

From the source of the example page, I found the URL that they are using (https://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.5763831,-122.4211769&fov=80&heading=70&pitch=0&key=AIzaSyA3kg7YWugGl1lTXmAmaBGPNhDW9pEh5bo&signature=hg7yTczCuAp4fwIWFySlSr_vq7o=) and pasting it into my browser's address bar successfully retrieves the image. Does your URL also retrieve the image successfully? 

All the best,

Yoav

[Heidi Vuletich]

Hi Yoav, 

Thank you for your response. Here's my code. Please let me know if there are other files that would be helpful. My URL does retrieve images successfully, though I have not figured out how to get the image to display at the angle that I want it. 

CODE

define(['managerAPI'], function(Manager) {

    var API = new Manager();

    API.setName('mgr'); //Sets the task's name in the data, in case you use API.save to save data [should use the task 'post' instead, as shown below in the manager's sequence]

    API.addSettings('skip',true); //Allows using Esc+arrows to move between tasks when testing the study. 

    //Randomly assigned a between participants condition.

    var dummy = API.shuffle(['cond1','cond2'])[0];

    //rich

    var cond1images = API.shuffle(['FIPS%2006041.jpg', 'FIPS%2008035-3.jpg', 'FIPS%2024027_3.jpg', 'FIPS%2034019_2.jpg', 'FIPS%2035028.jpg', 'FIPS%2036059.jpg', 'FIPS%2051107.jpg']);

    //poor

    var cond2images = API.shuffle(['FIPS%2048229.jpg', 'FIPS%2046113.jpg', 'FIPS%2038085-2.jpg', 'FIPS%2028051.jpg', 'FIPS%2022035.jpg', 'FIPS%2021237.jpg', 'FIPS%2013061.jpg']);

    var backgroundImage = dummy === 'cond1' ? cond1images[0] : cond2images[0];

    var params = {dummyCond:dummy, backgroundImage:backgroundImage}; 

    //The variables shared by all tasks

    API.addGlobal({

        baseURL: '/implicit/user/heidiv/places_iat_fixed/images/',

        mins: '9', 

        cat1: 'Black', 

        cat2: 'White',

        backgroundImage: backgroundImage

    });

Thank you!

[Yoav Bar-Anan]

Hi Heidi, 

I suspect this is not the whole code. I don't think that setting a backgroundImage variable to the global object would be enough to change the background image of the whole study or the IAT task. 

You are probably using the globa.backgroundImage variable in another script (perhaps the script you're using for the IAT). Can you find that and share that code? 

Thanks,

Yoav

[Heidi Vuletich]

Hi Yoav, 

You are right. Here's the IAT code: 

define(['pipAPI','https://cdn.jsdelivr.net/gh/baranan/minno-tasks@0.*/IAT/iat8.js'], function(APIConstructor, iatExtension){

    var API = new APIConstructor();

    return iatExtension({

//Set the canvas of the task

canvas : {

maxWidth: 725,

proportions : 0.7,

background: '#ffffff',

borderWidth: 5,

canvasBackground: '#ffffff',

borderColor: 'lightblue',

    css:{ background: 'url('+ API.getGlobal().baseURL + API.getGlobal().backgroundImage +') no-repeat', backgroundSize: 'cover'}

        },

I couldn't find any other references to background anywhere else. Does this seem to capture it?

Heidi

[Heidi Vuletich]

Hello, 

I just want to update everyone that I figured it out! :) Here's my updated code:

define(['managerAPI'], function(Manager) {

    var API = new Manager();

    API.setName('mgr'); //Sets the task's name in the data, in case you use API.save to save data [should use the task 'post' instead, as shown below in the manager's sequence]

    API.addSettings('skip',true); //Allows using Esc+arrows to move between tasks when testing the study. 

    //Randomly assigned a between participants condition.

    var dummy = API.shuffle(['cond1','cond2'])[0];

    //rich

    //var cond1images = API.shuffle(['FIPS%2006041.jpg', 'FIPS%2008035-3.jpg', 'FIPS%2024027_3.jpg', 'FIPS%2034019_2.jpg', 'FIPS%2035028.jpg', 'FIPS%2036059.jpg', 'FIPS%2051107.jpg']);

    //poor

    //var cond2images = API.shuffle(['FIPS%2048229.jpg', 'FIPS%2046113.jpg', 'FIPS%2038085-2.jpg', 'FIPS%2028051.jpg', 'FIPS%2022035.jpg', 'FIPS%2021237.jpg', 'FIPS%2013061.jpg']);

    var cond1images = API.shuffle(['location=37.7348602,-83.5440402&3a&75y&142.43h&88.59t&data=!3m6!1e1!3m4!1s0SVs_e_f3eht-fbBPo0zKA!2e0!7i16384!8i8192&size=5000x600&key=MYKEY'])

    var backgroundImage = dummy === 'cond1' ? cond1images[0] : cond1images[0];

    var params = {dummyCond:dummy, backgroundImage:backgroundImage}; 

    //The variables shared by all tasks

    API.addGlobal({

        baseURL: 'https://maps.googleapis.com/maps/api/streetview?',

        //baseURL: '/implicit/user/heidiv/places_iat_fixed/images/',

        mins: '9', 

        cat1: 'Black', 

        cat2: 'White',

        backgroundImage: backgroundImage

    });

Thank you for your help!