If you simply want it sitting to the side of the profile field table then one approach that you could take but which requires a little editing of your profile-loop.php file along with functions.php so is best done as child theme files would be this:
Create a function to wrap that google maps api code in and then add that function to:
add_action(‘bp_before_profile_loop_content’, ‘user_profile_locationMap’);
In your profile-loop.php file find the do_action(‘bp_before_profile_loop_content’) around this function wrap a new div with an ID of say ‘profile-content-sidebar’ it’s this new element that you would float to the right.
As – In my case – the ‘Location’ field is a late addition and for most users it will appear on their edit screens but will remain unused I don’t want the new div rendering to the right or otherwise if empty so a conditional is used to test the ‘Location’ field for data.
The new div is wrapped in:
if( bp_get_profile_field_data( ‘field=Location’)):
both for the opening and closing tags this way if ‘Loction’ is empty then the new div will not render and the do_action will be left to render any actions at the top before the profile data table loop as before, with the ‘Location’ field having data then the div is rendered.
Lastly some styles are required to create the desired visual rendering so create a ruleset for the new element #profile-content-sidebar which would contain properties: float:right; and width:250px the div that hold the profile table ( div class=”bp-widget base” ) now needs to be margined away from the right edge you could do this using a sibling selector which would be the preferred approach as you can in a sense make use of CSS ability to implement pseudo conditional selectors e.g:
#profile-content-sidebar + .base {margin-right:260px;}
This is the preferred approach as this ruleset to margin the table elements parent away is only applied if our new div is rendered if not the table will still stretch 100% as before. Of course this approach doesn’t work in certain older generation browsers so it might be best instead to set a new ID on that table parent element to style on but set that ID with the same conditional query used on the new div element earlier.
There is a certain flaw to the checking for the field ‘Location’ while it works it suits a very particular circumstance and if that area to the right was required for other actions then this ‘Location; check might prove a hindered and doubtless there is a better approach to be worked up in the long run.
I would love to see that.
