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?&q="+ encodeURIComponent( $(this).text() ) +"&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..
Replies
Honestly this is one of the best tips I ever added to this community... I am surprised more creators are not using it!
so glad i had this backed up...
How many of you are using this?