Category Archives: Resources

Android Google Map V2 – Use Multiple Maps in Application

Hi All,

Since last few days I was facing serious problem with using multiple Google Maps in a Android application project I am currently working on. The application is a true copy of already existing app and used same source code to build with some changes as per client requirement.

Recently I came to know that Google has stopped user from generating Map API keys for Google Map V1  hence I forced to use the latest available version. The application I am working on needed to look same as its iPhone counterpart so I used Tab Host/Activity in it.

The application started throwing issues when I used the latest version of Google Maps for Android. The problem was I had two map in the application and when I switched to 2nd Map screen from first one, the 2nd map did not work and showed same screen (map location) as 1st map screen. It accepted no user input i.e. no location change, zoom or pan.

It took me a lot of time to figure out a solution for this issue (almost 7 days), in between I found many people said it was due to Tab Host/Activity (I am not sure of it), some also suggested to use TabFragments but that did not work for me.

Solution

Finally I cam across an article on Google documents that discussed adding Maps on Android from code instead of XML and that did the trick for me. I added maps on both screen from code behind, but with this I also had to remove the map on the “OnPause” event of the Activity and re-initialize it on the “OnResume” event

I have created a sample android application that uses the solution, download it here

Note: You will need to change the Map API Key in the manifest file

Feel free to contact me in case of any problem

Cheers,

Ankit

Drag & Drop Pin on Map for Your Android Application

Hi all, I am very excited as I am very close to finish my first Android Application project.

From the past few days I have been working on it and truly this project has helped me learn a variety of stuffs including using various controls, external libraries, animations & my favorite Maps in android application. Personally I feel Map makes any application much smarter.

This application I have been developing uses Map to point users current location and it also allows to drag and drop the pin to any other location on the map and get address details for the position.

I love the way Drag & Drop Pin feature works on apple products (IPhone, IPod & IPad), specially the bouncy feeling it has and I wanted my application to have the same feel, but my bad, after searching for sometime on google I found that Google has not provided similar inbuilt feature for Android [I wonder why?], see the article here.

But as said in IT industry if client want it, it has to happen ūüėČ so after some more search I found another article that mentioned about a sample project which shows similar feature, see the article here. So I used the sample project and achieved the desired result. Though it does not have the same bouncy feel but it look good and satisfies the requirement.

I have created a sample Android project for everyone who may have similar requirement after now and also attached the source code for Android project here below.

Download Source : Drag & Drop Pin for Android App

Please feel free to contact me in case you face any problem, thanks for reading ūüėČ

Custom Shopping Cart for existing WordPress website

Hi all, apologies for the long delay for the next article, I have been staying very busy these days ūüôĀ

Today I am going to share my experience about creating/editing my first wordpress plugin. I have been working & customizing wordpress websites for like 2 years now but unfortunately never had a chance to develop a custom plugin for wordpress as everything thing you require is readily available, thanks to the huge wordpress user community ūüôā

But recently a requirement came up for integrating shopping cart plugin to an existing WordPress 3.0 website and payment gateway to be used was EWay. As always I started looking for an existing plugin that meet my requirements, unfortunately this time found nothing.

There are some paid plugins available for WordPress that allows payment through EWay but most of them were compatible with WordPress 3.1 or above. So finally we thought to create our own plugin this time ūüôā

As I was virgin in wordpress plugin development i decided to find a plugin that I can modify and use as per my requirement, after some search and with the help of Google Baba [I say Baba because Google knows it all :P] I found EShop, a very well planned/coded and useful plugin.

eShop is an accessible shopping cart plugin for WordPress, packed with various features. It utilises WordPress pages or posts as products , and is compatible with custom post types. Read more about it here

In case you have a requirement of a Custom Shopping cart for your existing WordPress website, I would 100% percent recommend eShop. You can easily customize as per your requirement, like selling multiple types of products, gift coupons, downloadable products etc

Check the Aquabumps website to see how my plugin looks like.

Feel free to ask me in case you have any queries after reading or if you want to know more about eShop and how to customize ūüôā

Thanks for visiting & happy reading ūüėČ

Joomla – User Authentication Using External Database (MySql)

Hi

Yesterday it was my first experience in working on a Joomla website. I was asked to develop a new site in Joomla for an existing site which had many existing registered users. So the first challenge for me was to allow those existing registered user to be able to login & use the new website with their existing credentials.

After a lot of search on Google, I found very useful plug-in MySql Auth Plugin for Joomla 1.5 which I thought I should share with you all.

MySql Auth Plugin for Joomla 1.5 let authenticate users against an external MySQL database and is fully configurable from Admin area. You can configure the host, port, database name, user data table, username column, password column, first name column, last name column and email column from the Manage Plugin section in the admin.

Below are the screen shot of MySql Auth Plugin administration panel

Screen shot 1

MySql Auth Plugin for Joomla 1.5

Screen shot 2

MySql Auth Plugin for Joomla 1.5

If you have a similar requirement, I would 100% recommend this plugin to you.

Hope this post saves you time ūüôā

Google Maps Javascript API V3 Example

Google Maps – one of the best resource available on the web that brings the world on your computer screen. With google maps distant places are just a few clicks away from you.

Google maps javascript api is amongst the most widely used api on the web as it easily lets you embed Google Maps in your own web pages. Version 3 or V3 as its called of this API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.

New Features

1. You can now specify the inclusion of optional libraries for specialized functionality in the Maps API!

2. Add animations to your markers! Make your markers drop or bounce when placed on the map.

3. The Google Maps API no longer requires a Maps API key!

4. The Google Static Maps service now supports custom styled maps!

Google Geocoding/Reverse Geocoding Service

Geocoding is the process of converting addresses (like “Taj mahal Agra, Tajganj, Agra, Uttar Pradesh 282001, India“) into geographic coordinates (like latitude¬†27.173006 and longitude 78.042086), which you can use to place markers or position the map.

The Google Geocoding API provides a direct way to access a geocoder via an HTTP request. Additionally, the service allows you to perform the converse operation (turning coordinates into addresses); this process is known as “reverse geocoding.”

I have created a sample application¬†“Map My Address”¬†for those those who want to start using Google Maps on the web pages.

Sample URL: http://ankitkedia.com/sample/GoogleMaps/index.html

Download Source: http://ankitkedia.com/sample/GoogleMaps/source.zip

Please feel free to download and use the source code or contact me if you have any queries.

Asp.Net User Control and Telerik ToolTip

Hi friends,

Another great day has ended let me share a new thing I learnt today. I have been using a lot of Telerik Asp.Net Ajax Controls these days and I must say they really help achieving complex goals by making your work simple. Telerik Asp.Net Ajax Controls is a set of useful controls like RadGrid, RadListview, RadAjaxPanel, RadProxyManager, Rad ToolTip Manaager and many more.

In this post I will share a solution to a problem which most of the user face when using Asp.Net UserControl with Telerik ToolTip.

The Telerik Tooltip control can display rich content like text, images and even standard ASP.NET and user controls. The built-in ASP.NET AJAX mechanism allows loads content after the user hovers with the mouse over the trigger element. It allows you to easily add tooltips to a single or groups of elements, or all elements on the page at once. You can configure the way the ToolTip is displayed ‚Äďside, offset, and relative to the mouse or to a triggering element. Telerik ToolTip control provides several types of animations ‚Äď Fade, Resize, slide, fade in to show hide the tooltip.

But a general problem faced by Telerik Tooltip users is rebinding the usercontrol data when using tooltip control for more then one item without making a page refresh because at time it seems Telerik Tooltip cache the data but this is not the case.

To correctly configure a Telerik Tooltip you should fulfil the following basic criteria:

1) The new values in the user control’s content controls should always¬†be set in the user control’s PreRender event.

If you are using the Telerik Tooltip inside any List control like Grid, ListView or Repeater, you should not that

1) The targets should always¬†be added to the RadToolTipManager’s TargetControls collection in the¬†list control’s¬†OnItemDataBound event.

2) The TargetControls collection should be cleared when the list control is paged and sorted.

3) If you have ajaxified the list control, you should add the tooltip manager to the same settings Рe.g put the tooltip manager in the same update panel or add it to the same ajax settings of ajax manager where the list control is added.

Please feel free to contact me isncase you face any problem ūüôā

Twitter like Message Alerts using JQuery

Hello Reader, 

Today I am here to share a cool way of showing message alerts on you your websites.  

It is very common to show custom message alerts to users/visitors on a website on the occurence of some events like validation errors on login or sign up forms or on data add/update or delete. Most of the times we use the common javascript alert() function to show such message which shows an ugly message box to the users or try to use a ready made third party tools which does similar task but loads your webpages with JS scripts and hampers the speed of your website and somtimes the performace of your web applications too. 

But why should you show those ugly message box or load your webspage with extra JS files when you have easy solutions with jQuery. 

jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
 

So here goes the code you implement on your webpages to show smart message alerts to visitor of your website. 

Step 1 

Download (if you dont already have) the latest version of jQuery script from http://jquery.com/ and include it on your webpage. 

Step 2 

Include this div at the top inside the body tag of your webpage 

Step 3 

Include the following CSS style in you stylesheet file. This controls the appearance and position of the Message Alert container. 

#divSlideMessage{
height:40px;width:99.8%;background-color:#ffffff;color:#000;font-family:”Trebuchet MS”, Tahoma; font-size:18px; text-align:center;display: none;border:1px solid #562c2c; margin:0 0 0 0;padding-top:10px;}

Step 4

Include this javascript function in you webpage

function ShowNotification(message, showwait, hidewait) {
$(“#divSlideMessage”).oneTime(showwait, function() {
$(this).html(message);
$(‘#divSlideMessage’).slideDown(“normal”);
$(‘#divSlideMessage’).focus();
}).oneTime(hidewait, “soon”, function() {
$(this).slideUp(“fast”);
});
}

Step 5 (Final Step)

Now use ShowNotification(message, showwait, hidewait) function in place alert() or any other function that you were using to show the message alerts.

ShowNotification accepts three arguments

message – your alert message

showwait Рtime in milliseconds, after how long the message should be shown

hidewait Рtime in milliseconds, after how long should it dissappear

Hope this helps, please feel free to contact me in case you find any problem.

Thanks for reading! ūüôā

Video Gallery for WordPress WebSite

Happy New Year Readers,

It has been quite a few months since I wrote my last blog post. Last few months I have been busy working on projects using Telerik Ajax Tools and WordPress. Today I am sharing my experience about creating a Custom Video Gallery for your wordpress site.

My projects requirement was a Video Gallery that can have videos from various sites like Youtube, Google, Vimeo, Dailymotion and more as well as videos (flv, swf etc) uploaded on clients server.

Usually you can always find a readymade free plugin for everything you want on your wordpress site but this is not the case everytime. Alter a lot of search on Google, I could find a lot of video related plugins like Vipers Video Quicktags but none directly fulfilled my requirement.

Viper Video Quicktags is a very useful plugin which allows easy and XHTML valid posting of videos from various websites such as YouTube, DailyMotion, Vimeo, and more. So finally we choose to create a Custom Video Gallery using Viper Video Quicktags.

My Video Gallery looks like this

Video Gallery

On the right appears a carousel with a list of video available from which you can select a video to be played.
If you have a similar requirement or you need more information on this feel free to contact me ūüôā

Gantt Chart with Google Charts

Hi Friends

Graphs & Charts are used to illustrate many types of data and are not limited to the simpler types such as line, bar, and circle. They help to make facts clearer and more understandable. Beautiful Graphs and Charts always adds to any report or analysis.

One such chart is Gantt Chart, Gantt chart is a specialized bar chart used to provide a graphical overview and schedule of tasks. It helps in analysis of planed goals and actuals results. This is a chart with rectangular bars.

In one of my project I was required to create a graphical report to compare forecasted and actual Milestone data. So I felt Gantt Chart is the best way to display the comparison. After some research on google I found an easy way of creating Gantt Chart using Google Charts API.

Here is a sample code for it

<img src=”http://chart.apis.google.com/chart?
cht=bhs
&chs=400×200
&chd=t:0,0,0,0|10,20,30,40|10,20,40,20
&chxt=x,y
&chxl=1:sad|Testing
&chxr=0,0,100|1,0,100
&chds=0,100
&chco=008080|00CCFF,ffffff00
&chg=20,50
&chbh=20,10
&chtt=My Gnatt Chart
&chts=000000,25
&chdl=Forcast|Actual
&chdlp=b” />

My Gantt Chart

For any queries, confusion or R&D you can consult Google Chart API Documentation or you can also post your queries here.

Hope this post helps you, thanks for reading ūüôā

Animated Banner With JQuery

Hi All

Today I would like to share some of my experience with JQuery. JQuery is a fantastic lightweight javascript library that makes it possible to do complex things very fast and easily. Animation is one such thing. Animations using JQuery adds up to the looks of your webpage without actually increasing much load on it and also you do not really have to put a lot of efforts for it. It is simple to understand and implement JQuery plugins. It offers a lot of plugins for AJAX, Animations and Effects, UI, Timers and many more. All of them are easily available and free to download here.

In this post I am sharing my source code for creating a simple, useful yet beautiful animated banner with JQuery.

Here is the source:

HTML:

<div id=”container”>
<div id=”imageDiv1″ class=”bottom”><img id=”image1″ src=”images/image1.gif” alt=”” /></div>
<div id=”imageDiv2″ class=”right”><img id=”image2″ src=”images/image5.gif” alt=”” /></div>
</div>

CSS:

#container{
margin-top:150px;
height:135px;
width:215px;
border: 1px solid #000;
text-align:center;
overflow:hidden;
position:relative;
}

.right{
top:-140px;
right:-220px;
position:relative;
}

.bottom{
top:140px;
right:0px;
position:relative;
}

JQuery:

I am adding the query script .js file here with the post. Download the javascript file banner-script.js here.

Please replace the images in this file with yours.

This is really easy and very useful. If you have any queries or you face any problem feel free to contact me.

Hope this is useful for you, thanks for reading ūüôā

Updated on 15th January, 2011

Now you can also see the demo here.