Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

So, you've read and followed the instructions on how to map your network members (or how to make a member map in 2.0) and you've created a map.  But now you realize that your map hangs off to the side when viewed in mobile devices.  Well you may have noticed that in the height and width parameters of the embed code, the default height for medium embeds is 450px or 75% of the default width (600px). And as you may know by now, measurements in pixels will not adapt to the 3.0 platform. The way to fix this is to make it adaptive so that it responds to the width of the device your visitor/member is using.  Here is one way to do just that in simple terms:

1. Add The Following CSS to your Adv. CSS section of Dashboard:

.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
    }
    .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }

2. Now Grab your iframe embed code for the map and paste it into a TXT file:

3. Now simply add this before that code:    <div class="google-maps">

<iframe>......</iframe>

and this after the code:  </div>

Note: you can change the the value of padding-bottom 75% in line 3 above in the CSS to to something for a different aspect ratio. 

4. Now simply copy that entire iframe code wrapped in div class="google-maps" and paste it into the HTML module where you'd like for it to be displayed.

Result of Responsive Member Map:

I may add a few more tweaks to get this perfect and when I do, I'll place them back inside this discussion.

If you have any questions or would like to hire someone to map your Ning network members for you, drop me a line to discuss. Good luck and enjoy!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • Thanks so much !
  • Yes, I'm raising my hand; I'm a slug and finally getting around to using this on another new site.  Thank you so much for donating JF. I appreciate it.

This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"KOS, Thanks!  You are so nice!"
Saturday
Bizz replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"This happened once before on 3 some time back, it was something Ning had to sort out"
Saturday
Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"Bizz, Thanks... but is this what you see? This is not my layout---this is a link  to screenshot   s…"
Friday
Kos replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"There something going on b/c CSS isn't loading when I'm signed in.  It's happening on all major bro…"
Friday
Kos replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"Okay did it.  Ticket #1919976"
Friday
Bizz replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"Loads for me on all browsers"
Friday
Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
" A member says discussions page is locked -won't load... I am on Chrome!LOL!"
Friday
Suzie Nielsen replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"I can't get the dashboard to load so I can turn in a ticket! Can you?"
Friday
Kos replied to Suzie Nielsen's discussion
Ning 2 having problems loading
"It pops up on Chrome and IE with no problem but it won't load at all on Firefox.  I've tried five t…"
Friday
Suzie Nielsen posted a discussion
Hi there, Just wondering if anyone else is having problems today? My site won't load properly! I ha…
Friday
AutographTip updated their profile
Friday
Fabricio Giugni replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Hi there?Is the Landing page working now? Can we capture emails? Does it work with MailChimp?
I ask…"
Friday
More…

Meanwhile, you can check our social media channels