Source code and sample html available at: https://github.com/prabgupt/googleMap_virtual_tour
Usage: Mentioned in README present at git repo above
Purpose of Plugin: You can display virtual tours between places on map. Currently, above sample show animation of marker moving along actual direction path between places located on map in sequence specified.
Prequisite
- HTML, jQuery/JavaScript knowledge is required
- Basic knowledge about methods available in google Maps Javascript API v3 is recommended
Summary about method’s inside custom googleMaps js
You’ll need to mainly use two method just like used in sample html.
- showMapForDay- This method would render the map with places displayed as markers and routes connecting those places. It takes following arguments:
location 2D Array – It contains single locations in format [lat, lng] and routes in format [[lat1, lng2], [lat1, lng2]]. You can skip routes from this array if in your case, there will always be a route between two consecutive locations. Routes then, can be auto-generated inside this method after modifying its code a little bit.
zoom - zoom level which you want to set for your map
divId - This is div element Id inside which you want to show map. Google Maps libraries need this as an argument and hence passed here.
Description Array – This is array containing description about each location to be displayed in infoWindow when corresponding marker on map is clicked. This attribute allows HTML code inside it.
- animateTrip – This method displays virtual tour between places in sequence as specified. It also supports play/pause feature. If this function is called when tour is running, it resumes tour while if it is called when no tour is running, it starts tour. Few of the arguments in this method are same as above method:
divId - This is div element Id inside which you want to show map. Google Maps libraries need this as an argument and hence passed here.
location 2D Array – It contains single locations in format [lat, lng]
Description Array – This is array containing description about each location to be displayed in infoWindow when place is reached while virtual tour. This attribute allows HTML code inside it.
callBack Function – This function specifies what to do when tours end. In case not provided, map will halt at last location with its infoWindow opened.
Main function which is actually responsible for enabling virtual tour animation
- animate - We call this function periodically using ‘setTimeout’ Handler and each time this function is called, marker location is incremented by ‘step’(constant variable in js). In case current step is closer to the place we have located on map, marker is displayed for the location and corresponding infoWindow is opened by triggering ‘click’ action on the marker. Likewise, we keep proceeding until we reach ‘eol’(another variable in js) which signifies total path distance to be traveled on map and is calculated dynamically based on map’s locations.
This post will guide you on how to add wikipedia search on your web site and furthermore how to customize the search output, depending on need for your website. Also all the intra links available inside wikipedia content would be made to open inside your site only rather going to their actual WikiPedia page.
Pre-requisite:
Refer wikipedia API documentation: http://en.wikipedia.org/w/api.php
Basic knowledge about HTML, Javascript/JQuery
Getting Started:
Sample 1:
Click here for Demo. This contains normal input text box and would display wiki content on the same page after some customization in output. Source code for the same can be found here.
- Include google JQuery script as well as some of the wikipedia stylesheets so as to have the content rendered elegantly. Please refer <head>content in source code(link mentioned above) for complete list.
- Create a form to accept the search input
<form accept-charset=”UTF-8″ action=”" id=”inputform” method=”post”><label for=”name”>Name</label><input id=”name” name=”name” type=”text”><input name=”commit” type=”submit” value=”Search”></form>
- Create div tags to hold wiki content returned after search
<div id=”container”><div id=”wiki_container”></div><div id=”wiki_attribution” style=”text-align:left; border-top:1px solid #c73734; font-size:13px;”></div></div>
- Call JavaScript function using JQuery when above form is submitted. Below logic would prevent the whole page to load again but just the page section getting changed (by now you would have understood that I’m talking about AJAX)
$(‘#inputform’).submit(function(){var name = $(‘#name’).attr(“value”);getAreaMetaInfo_Wikipedia(name);return false;});
- Implement the JavaScript function being called above.
- Get content about the object being searched from Wikipedia
function getAreaMetaInfo_Wikipedia(page_id) {title = page_id;$.ajax({url: ‘http://en.wikipedia.org/w/api.php’,data: {action:’parse’,prop:’text’,page:title,format:’json’},dataType:’jsonp’,success: function(data) {wikipage = $(“<div>”+data.parse.text['*']+”</div>”);wikipage.find(‘sup’).remove();$(“#wiki_container”).html(wikipage);$(‘#wiki_attribution’).html(“Description above from the Wikipedia article <a href=’http://en.wikipedia.org/wiki/” +title+”‘ target=’wikipedia’>”+title.replace(/_/g,’ ‘)+“</a>, licensed under <a href=’http://creativecommons.org/licenses/by-sa/3.0/’ target=’wikipedia’>CC-BY-SA</a>, full list of contributors <a href=’http://en.wikipedia.org/w/index.php?title=”+title+”&action=history’ target=’wikipedia’>here</a>. Community Pages are not affiliated with, or endorsed by, anyone associated with the topic.”);}});}
Above post would get content from WikiPedia for object being searched and would also append attribution to wikipedia for the content (as per wikipedia licence)
-
- To have all links inside wiki content to open inside your website only rather having them go to their actual wikipedia page. Include below code inside success funtion above
wikipage.find(‘a’).each(function() {var href = $(this).attr(‘href’);/* put a check for wikipedia link. do not touch rest of the links*/$(this).attr(‘href’, “javascript:getAreaMetaInfo_Wikipedia(‘”+ href.substring(href.lastIndexOf(‘/’)+1) +”‘)”)});
-
- Customize wiki content to display on your side like mentioned below
$(“#References”).hide();$(“div.reflist”).hide(); // hide reference list on wiki$(‘table.infobox’).hide(); //hide info boxes on wiki$(‘table.toc’).hide(); // hide table of content$(‘table.navbox’).hide(); // hide navigation box$(‘span.editsection’).hide(); // hide edit link
Sample 2:
Click here for Demo. This would display wiki summary about the link text when clicked upon, in an inline popup appearing on the same page. Also all the internal links inside that would open in the same popup box rather going to respective wiki page. Source code for the same can be found here.
Concept remains the same as before. Difference here is that we would only be displaying first para of wiki content inside popup which was done using wikipage = $(“<div>”+data.parse.text['*']+”<div>”).children(‘p:first’).
