automagically - FORUM - Ning Creators Social Network2024-03-29T10:47:16Zhttps://creators.ning.com/forum/topics/feed/tag/automagicallyTIP: How to Automagically Change Text Locations into Mapshttps://creators.ning.com/forum/topics/tip-how-to-automagically-change-text-locations-into-maps2018-05-26T21:38:17.000Z2018-05-26T21:38:17.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>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.</p><p><a href="https://codepen.io/JFarrow/pen/jxgayb" target="_blank" rel="noopener">It'll look something like this<img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/33826460?profile=RESIZE_710x" width="710"/></a></p><p><span style="font-size: 14pt;"><strong>Ok so say you or your members add a bit of HTML to a post like this:</strong></span></p><p><br><br/> Automatically Generated Google Maps link: <br/> <address class="<strong>link</strong>"><br/>30 Rockafeller plaza<br/><br><br/>New York, NY 10112<br/></address><br/><br><br/>Automatically Generated Embedded Google Map: <br/><address class="<strong>map</strong>"><br/>30 Rockafeller plaza, New York NY 10112<br/></address></p><p><span style="font-size: 14pt;"><strong>After you add the following snippet of jquery code to your Custom Code (bottom).....</strong></span></p><p><script></p><p>//Generate a link to google maps<br/> x$(document).ready(function () {<br/> //Convert address tags to google map links<br/>x$('address.link').each(function () {<br/>var link = "<a href='https://maps.google.com/maps?q=" + encodeURIComponent( x$(this).text() ) + "' target='_blank'>" + x$(this).html() + "</a>";<br/>x$(this).html(link);<br/>});<br/>});</p><p>///Generate a google embeded map<br/> x$(document).ready(function(){<br/> //Convert address tags to google embedded map<br/>x$("address.map").each(function(){<br/>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>";<br/>x$(this).html(embed);</p><p>});<br/> });</p><p> </p><p></script></p><p> </p><p><span style="font-size: 14pt;"><strong>Whenever anyone on your site wraps their location text inside either of the two following HTML brackets, it will generate a map:</strong></span></p><p><address class="<strong>link</strong>"> LOCATION </address></p><p> </p><p>or</p><p> </p><p><address class="<strong>map</strong>"> LOCATION </address></p><p> </p><p><iframe src="//codepen.io/JFarrow/embed/jxgayb/?height=300&theme-id=3719&default-tab=js,result&embed-version=2" width="100%" height="300" frameborder="no">See the Pen <a rel="nofollow" href="https://codepen.io/JFarrow/pen/jxgayb/">Automatically Generate a Google Address Link or Map</a> by JFarrow (<a rel="nofollow" href="https://codepen.io/JFarrow">@JFarrow</a>) on <a rel="nofollow" href="https://codepen.io">CodePen</a>.</iframe>Do you find this to be useful? Let me know..</p></div>