Add a Simple Geolocation Widget to Your Ning Site

[⚡JFarrow⌁]

If you have looked around for a simple location aware widget to add to your Ning network, you have probably seen all sorts of garbage widgets loaded with ads and flash junk.  This is why i have been working on a HTML5 solution that can be hosted on Ning's servers and not depend on external resources that make pages heavy.  Below is a single block of code which will iframe the widget into your HTML box.

Example of Ning Powered Location Aware Widget [View Demo]

(FYI educators and students are free to join BNation and follow the Voyage)

Code For Ning-Powered/Hosted Iframed Location Widget

<iframe src="https://storage.ning.com/topology/rest/1.0/file/get/11490626?profile=original" style="border:0px #FFFFFF none;" name="locateyourself" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="500px" width="500px"></iframe>

Just paste that code into a HTML box inside your page and adjust accordingly. The index.html file is attached below for those who might like to dissect it and make modifications.

When I say "Ning Powered" I mean all scripts and styles have been hosted on Ning servers so it should not weigh your site pages down like the other garbage out there.  I am also working on another version that will not require your member to retrieve geolocation from their browser (which will be better for schools and private locations).  If you watch this post on my project site, you'll get the update first.

I figured I would share this with you all because I find it extremely helpful as a Community Manager who enjoys experimenting with web mapping and geolocating resources.

Some Practical Uses For Geolocation:

Finding locations to add to Photos and Videos on Network

Allowing members to provide more accurate locations to profiles and Groups

Let me know what you think about this experiment.

[⚡JFarrow⌁]

If you want to give your members a tool to use for showing where their posts and content are geolocated, here is a tool for you. Use this static map generator tool to create an embed code for adding maps to your posts, pages and groups or virtually any post on Ning 3.0 networks using this tool. Code is below for adding your own to a site.

 

Code for Adding Google Maps Static Map Generator to Your Site

 

<iframe name="mapgenerator" width="100%" height="700" style="border: 0px #FFFFFF none;" src="https://storage.ning.com/topology/rest/1.0/file/get/11510848?profile=original" marginheight="0px" marginwidth="0px" frameborder="1" scrolling="yes"></iframe>

[Jelena]

Wow awesome Thank you JFarrow.. This like a facebook add a location  to post?

I want to try it :)

[J.Ayvar]

Thank you! Thats Why i Need to my Ning site: http://forogrey.com/

[⚡JFarrow⌁]

still relevant