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

NC for Hire

Ok so someone I am helping with their Ning community has a lot of locations which are mentioned throughout their site and they were wondering how we could change those locations into maps automatically.  I am going to show you how to do two things like this..  First how to change an address into a link to google maps automatically and second, how to convert mentions of a location into an autogenerated map.

It'll look something like this

Ok so say you or your members add a bit of HTML to a post like this:

<br>
Automatically Generated Google Maps link:
<address class="link">
30 Rockafeller plaza
<br>
New York, NY 10112
</address>
<br>
Automatically Generated Embedded Google Map:
<address class="map">
30 Rockafeller plaza, New York NY 10112
</address>

After you add the following snippet of jquery code to your Custom Code (bottom).....

<script>

//Generate a link to google maps
x$(document).ready(function () {
//Convert address tags to google map links
x$('address.link').each(function () {
var link = "<a href='https://maps.google.com/maps?q=" + encodeURIComponent( x$(this).text() ) + "' target='_blank'>" + x$(this).html() + "</a>";
x$(this).html(link);
});
});

///Generate a google embeded map
x$(document).ready(function(){
//Convert address tags to google embedded map
x$("address.map").each(function(){
var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
x$(this).html(embed);

});
});

 

</script>

 

Whenever anyone on your site wraps their location text inside either  of the two following HTML brackets, it will generate a map:

<address class="link">  LOCATION </address>

 

or

 

<address class="map">  LOCATION  </address>

 

Do you find this to be useful? Let me know..

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

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

Replies

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

Disha Rush updated their profile
yesterday
Marly posted a discussion
Is there anyway to make comments from one member's profile to another appear on the activity feed.…
Thursday
Josef Essberger updated their profile photo
Jun 25
kostasgr liked Alex - Rosas † Negras's discussion I want to thank JOHN BIZLEY ( BIZZ) for his invaluable help, active icons on the Ning bar,CODES ADDED
Jun 13
Daniel J. Wilford updated their profile
Jun 12
Pam Givens posted a discussion
HiIs there a way to post photos that won't go onto my page.  We just had a great conference and all…
May 31
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Styling Groups with New Design Studio with CSS and a Swift Hack
"nice assist
 "
May 19
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I want to thank JOHN BIZLEY ( BIZZ) for his invaluable help, active icons on the Ning bar,CODES ADDED
"nice tip!"
May 16
Brandon Cameron updated their profile
May 11
John Hodge updated their profile
May 9
John Hodge updated their profile
May 2
Rhonda replied to ⚡JFarrow⌁'s discussion
Time Saver: Your RSS Feeds for Location Tags on Ning
"Hi JFarrow,
I was wondering if you had a code for birthdays. I accidentally deleted the code that I…"
Apr 30
More…

Meanwhile, you can check our social media channels