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

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

Votes: 0
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.
 

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

Rosas † Negras replied to Bizz's discussion
Tip: Resize your Social Channels Video
"thank you very much my Master"
2 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"I waited two days ... and today the answer I have to pay ... I told him that I would have a discuss…"
17 hours ago
Bizz posted a discussion
If you use the css section quite a bit like I do you may find the box a little limited in it's heig…
17 hours ago
Bizz posted a discussion
Ning have changed the layout for the social channels and so we have a small video in the middle of…
17 hours ago
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Charles, no unfortunatly not it just a way to get the music page onto a page
 "
17 hours ago
Bizz replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"The agent has got this wrong as that is what you pay for. Have you got it set that the option to re…"
18 hours ago
Rosas † Negras replied to Bizz's discussion
Tip: Profile Themes And Code
"Theacher one day they will tell me that you go to the moon ... or they will comment before taking t…"
18 hours ago
Bizz posted a discussion
You may have seen in some previous post that I have been working on a way that you can provide diff…
18 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"the photo of the agent that a said I have to pay for the option and this pisses me off beast my fri…"
18 hours ago
Bizz replied to Suzie Nielsen's discussion
Make me love Ning 3.0
"If you mean the Content Management this is for moderation and spam. This would be where there may b…"
19 hours ago
Bizz replied to Rosas † Negras's discussion
Paying for a replay on a video or photo? Ning 3.0?????
"Hmm something wrong there my friend. All works on my sites with no problem. Has your network ran ou…"
19 hours ago
Cindy Dean Mccoy replied to Cindy Dean Mccoy's discussion
"Thank you for your loyalty" survey
"Thank you for letting me know Suzie.  I will put in a trouble ticket for I still have not heard fro…"
23 hours ago
More…

Meanwhile, you can check our social media channels