Are you new to freelancing? Or someone who is searching for some inspiration, or may be tips and techniques to be one of the best freelancers in the world? Well then, this article is dedicated for you.

To be a successful freelancer, you need to have that continuous learning attitude, you get to update yourself on what is new, what is "in" and so on. And one of the resources where you can get knowledge is through reading. Reading is one of the good resources where we can get our inspiration, motivation, may be guides and techniques to become one of the best freelancers on whatever field you choose.

In here, I compiled great articles and categorized them based on your needs that will be very helpful for you, especially for freelancers. These include guides, tips, techniques and even experiences from other freelancers.

When Starting Up

Image by: Louis Abate

Do you already have that idea in your mind but do not know how to start? Or where and when to begin? These readings can help you decide.

1. The Signs That You're Ready To Start Freelancing

by: Hilde Torbjornsen

In this article, you will find out the signs that you are already ready in facing the world of freelancing.

2. 17 Tips for Designers on Starting a Freelance Business

by: Steven Snell

These 17 tips you can read on this article consists almost all of the things you want to learn about freelancing as a starter: lifestyle, techniques, unexpected issues, and more. This will help you prepare in meeting the challenges of a freelancer.

3. A Comprehensive Guide to Starting Your Freelance Career

by: Collis Ta’eed

A great article that will guide you from the time you will start until the time that you already in the phase of dealing with your clients, and becoming as one of the full-fledged business men/women in the world.

4. Going Freelance: Rules of Preparation

by: Samuel Ryan

Take time to read this article where Samuel Ryan shares his experience and gave tips when he decided to enter the world of freelancing. You may both have the same experience and can get good tips on him.

5. Ask the Expert – Speaking About Startups with Collis Ta’eed of Envato

by: Jad Limcaco

Take a look at how Collis Ta'eed of Envato made onto the top on this interview.

6. How to Start a Freelance Company

by: Shannon Noack

Shannon Noack, owner of Snoack Studios, shares her experiences on how she started and what are the things she did that made her freelance company boom, from starting up to marketing your own.

7. What I Wish Someone Had Told Me About Freelancing

by: Elizabeth Gast

This short but full of tips article will raise your eagerness to become a freelancer. Be inspired.

8. Is the Title "Freelancer" a Turn-Off?

by: Brian

Is it really a turn-off to be a freelancer? Let this article explain it to you.

Inspiring Words and Helpful Tips to Ponder

Image by: Karen Hunnicutt

One of the vital things a freelancer must have is inspiration. Be inspired and have some tips to ponder with these articles.

1. 6 Tips Freelancers can Learn from Beggars

by: Jacques van Heerden

Who could imagine that freelancers can learn a lot from beggars? Curiosity strikes, eh? Read this article to believe how life of a freelancer is compared with to the life of a beggar.

2. Time Management Tips for Freelance Designers

by: Arfa Mirza

One of the keys a person must have to attain success is time management, especially with freelancers. Be guided by these time management tips, after you read this and followed the tips, surely you will manage your time properly.

3. 5 Reasons Every Freelancer Needs An Accountability Group

by: Travis Robertson

Find out on this article on how an accountability group is very important for every freelancer.

4. How to Stay Ahead of the Curve as a Designer

by: Aaron Irizarry

Are you being attacked by nervousness that your business or freelance work will slow down because of financial problems and with our bleak economic outlook? Then this article will remove that nervousness in you by giving you guidelines or tips for you to stay ahead of the curve.

5. 10 Ways To Make Your Freelance Business Fail

by: Laura Spencer

Avoid your freelance business to fail by reading through this article on what are the aspects of freelancing could break it.

6. My Top 5 Biggest Freelancing Mistakes

by: Chris Garrett

In this article, Chris Garrett shares his story and the biggest mistakes he did on his freelancing life.

7. 15 Ways to Get Inspired

by: Yael Grauer

Check this article on what you can do to get inspired.

How to Avoid Distractions and Deal with Stresses?

Image by: Mohammed Al-Naser

Distractions may come in many forms. Be guided by these articles to avoid those. Or do you feel stressed out? Remember, stressed is spelled as desserts backwards. That’s just a piece of cake!

1. Minimize Freelance Stress the Easy and Clever Way

by: Hilde Torbjornsen

Know some tips on how you can minimize your stress as a freelancer in the easier and cleverer way.

2. Be Healthy: Simple Exercises for Freelancers

by: Samar Owais

Are you feeling stressed out? Here are few simple stretching exercises to keep your body alive and kicking.

3. 10 Ways to Stay Creative While Exhausted
by:  Richard Darell

Keep that creativity in you alive by following these ten ways to stay creative while being exhausted.

4. 21 Fun Distractions for Freelancers

by: Laura Spencer

Are you searching for a stress reliever after that long difficult project? This article gives you twenty one enjoyable fun distractions. Have fun!

5. Freelancing During an Illness

by: Alexis Rodrigo

Find out what you can do as a freelancer during the time of you having sickness.

6. Keep Your Sanity by Managing Client Expectations

by: Brian Casel

Brian Casel shares his experiences on how you can keep your business healthy and stable, as well as your personal life and well-being.

Great Tools for an Easier Work

Image by: Pedro Vidigal

Want to make your work easier? Take a look at these must have tools on your hand.

1. Insights Into the Running of a Design Business

by: Duane Kinsey

This article gives you some of the great tools you can use to manage your daily tasks. You may also gather tips here on how you may market your business.

2. The Bare Bones That Every Freelance Contract Should Have

by: Mel Ndiweni

Want to know what you should include on your contract as a freelancer? This article gives you the "bare bones" a contract should have.

3. Day 22: Twitter for Freelancers

by: Alexis Rodrigo

Find out on this article how Twitter will help you to market your business. You can also check out Alexis’ 31 Days to Start Freelancing here.

4. Ten Terrific Apps to Help You Keep Track of Your Time

by: Laura Spencer

Time is very important for everyone, especially for freelancers. Laura Spencer offers you ten applications on how you can keep track of your golden time.

5. 11+ Computer Security Apps to Keep Your Freelancing Business Safe

by: Laura Spencer

Keeping your computer secured is very important, especially into the business of freelancing. Take a look at these eleven computer security applications to secure your one important asset, your computer.

6. 7 Productivity Tools I Couldn't Live Without

by: Glen Allsopp

Glen Allsopp shares the seven productivity tools he can’t live without. Let yourself find out if these out will also give benefits to you.

7. 35 Online Tools That Make Your Freelance Career Easier

by: Ritu

Another article that consists of awesome online tools that can make your freelancing work very easy.

How to Deal with your Clients?

Image by: Ideias Frescas

Come and take a look at these articles that are all client-related tips and guidelines.

1. Meeting Your Client for the First Time

by: Mel Ndiweni

This article gives you great tips on what you need to do when you are meeting your client for the first time.

2. The Components of a Successful Client Relationship

by: Alexander Dawson

This article offers you essential rules on how you can build a good relationship on your client.

3. Client Communication: The Most Important Part of Freelancing

by: Samuel

Here are tips you can consider when it comes to communicating with your clients.

4. Dealing With Clients Who Refuse To Pay

by: Robert Bowen

Read on this article on what you can do when you encounter clients who do not respect your work and refuse to pay.

5. How to Get Clients to Absolutely Love Your Freelancing Work

by: Lexi Rodrigo

Make your clients fall in love with your work by following these lovable tips.

6. 5 Tips for the Initial Client Sales Call

by: Matthew Moore

Read this article to learn how you can get the most out of your sales call. Good sales call means incoming profits for you.

7. Two Special Words that Will Make Your Clients See You Differently

by: Laura Spencer

Discover on this article how these two words improve your relationship with your clients.

8. How To Get Your Clients To Respect Your Time

by: Dave Navarro

Not only the time of your clients is important, yours as well. This article teaches you to let your clients respect your time.

9. 12 Breeds of Clients and How to Work with Them

by: Jack Knight

This article gives you twelve kinds of client’s personality you can encounter as a freelancer.

10. 7 Tips for Negotiating a Freelance Contract

by: Thursday Bram

Get some tips to help you better negotiate your contact on your client as a freelancer.

How to Manage your Finances?

Image by: pshegubj

Here are some articles that will give you tips on how to manage your finances and deal with expenses as a freelancer.

1. What Freelancers Need to Know About Their Finances

by: Ana Gonzalez Ribeiro

What are the things you need to know in your expenses and in financing as a freelancer? Check them out on this article.

2. How To Get Master Grade In Finances Being a Freelancer

by: Hilde Torbjornsen

Learn from a great freelancer for a decade now on how you can run your own freelance business and budget well.

3. 6 Money Management Software for Personal Finance (Freelancer’s Special)

by: Sushaantu

Here are six kinds of software to help you manage your personal finances as a freelancer.

4. Save Money on Taxes by Deducting Your Office Expenses

by: Thursday Bram

Have these tips on how to lessen your expenses and save your own money.

5. Managing Your Finances as a Freelancer in 7 Simple Steps

by: Tom Walker

This article consists of simple steps and some applications and resources to help you manage your finances in just seven steps.

6. Personal Finance Lessons From "The Social Network"

by: Joshua Ritchie

Take a look at this article on how Mark Zuckerberg, founder of Facebook learned about personal finances and money management.

7. Student Freelancing: Tips to Budget Your Freelance Earnings

by: Stephanie Gonzaga

Stephanie Gonzaga, a freelance writer shares tips on how you can budget your earnings. This one is especially dedicated to those young student freelancers out there.

Secrets of being successful into freelancing or on whatever field you decided to join, you should have that self-motivation and passion in yourself to fulfill that dream. I know these great resources will inspire you and guide you to be the best on your freelancing career. Have fun reading!

This is my fourth tutorial covering features of the Google Maps API v3. This time I will show you how to use the street view service. I have built an app for this tutorial, an interactive visit of Paris. You'll be able to visit certain locations, walk through Paris or take virtual tours.

What google maps features are covered in the tutorial?

• Adding a map to your site
• Using the directions service
• Using the street view service – used to show a 360 view of various places

Prerequisites

The application is built using html, php and javascript. It would be best if you had some basic knowledge of these.

What are we going to build?

We're going to build an interactive visit of Paris. The visit starts in front of the Eiffel tower. To continue, a user can walk through the city, go directly to certain locations highlighted on the map, or take a tour of the islands (Ile de la Cite and Ile Saint Louis).

You can view the app here! And also download the source code from here.

Creating the layout for our app

We'll use a simple layout. We'll show a title and some info about our app at the top of the page. Below that we'll add three columns, one for the Paris map, one for the street view and one for steps from the islands tour.

Here's how the code looks like:

 <body>    <div id="title" style="width:100%; height:5%;">       <h1><center>Paris Visit</center></h1>    </div>    <div id="details" style="width:100%; height:130px;">       Your virtual travel visit starts near the tour Eiffel. To continue the visit you have the following options:       <ul>          <li/>Move directly from the street view          <li/>Move the pegman on the map to choose a location - some ideas are already marked          <li>Take a tour: &nbsp;<input value="take islands tour" onclick="visitIslands();"/></li>       </ul>    </div>    <div id="map_canvas1" style="width: 450px; height: 500px; float: left;"></div>    <div id="space" style="width=10px; height: 500px; float: left;">&nbsp;</div>    <div id="map_canvas2" style="width: 500px; height: 500px; float: left;">use the pegman to choose location to visit</div>    <div id="directions" style="height: 500px; float: right;"></div> </body> 

The map_canvas1 div will be used to hold the map, the map_canvas2 div is for the streetview and the directions div is for the showing the steps in the tour. As you noticed, the initialize function is called after loading the page, the function will show the map and street view. Let's see how it looks like.

Showing the map and streetview

We will first have to include the google maps api, like so:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

The initialize function looks like this:

 // the function called when the page loads; it shows the map and street view function initialize() {    // coordinates for the center of the map    var mapCenter = new google.maps.LatLng(48.85893528,2.2933412);    // options for the map    var mapOptions = {       center: mapCenter,       zoom: 12,       mapTypeId: google.maps.MapTypeId.ROADMAP,       streetViewControl: true    };    // create a new map object to be shown in the map_canvas1 div elements and with the options that were set    map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);     // options for the panorama    panoramaOptions = {       addressControl: true,       addressControlOptions: {          style: {backgroundColor: 'grey', color: 'yellow'}       },       position: mapCenter,       pov: {          heading: 140,          pitch: +10,          zoom: 1       }    };    // show the panorama in the map_canvas2 div element with the options that were set    panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions);    // set street view for map    map.setStreetView(panorama); // add marker for tour eiffel      // on map    var marker = new google.maps.Marker({       position: mapCenter,       map: map,       title:"Paris visit starts here!"    });    google.maps.event.addListener(marker, 'click', function() {       panorama.setPosition(mapCenter);       panorama.setPov({heading: 140, pitch: +10, zoom: 1});    });       // on panorama    var markerPanorama = new google.maps.Marker({       position: mapCenter,       map: panorama,       title: 'Tour Eiffel'    });    // add notre dame marker      // on map    var positionNotreDame = new google.maps.LatLng(48.853499,2.348090);    var markerNotreDame = new google.maps.Marker({       position: positionNotreDame,       map: map,       title:"Notre Dame Cathedral"    });    // add listener to change panorama options when the marker is clicked    google.maps.event.addListener(markerNotreDame, 'click', function() {       panorama.setPosition(positionNotreDame);       panorama.setPov({heading: 140, pitch: +10, zoom: 1});    });       // on panorama    var markerNotreDamePanorama = new google.maps.Marker({       position: positionNotreDame,       map: panorama,       title: 'Notre Dame Cathedral'    });    // add louvre marker       // on map    var positionLouvre = new google.maps.LatLng(48.862266,2.336728);    var markerLouvre = new google.maps.Marker({       position: positionLouvre,       map: map,       title:"Louvre Museum"    });    // add listener to change panorama options when the marker is clicked    google.maps.event.addListener(markerLouvre, 'click', function() {       panorama.setPosition(positionLouvre);       panorama.setPov({heading: 230, pitch: +10, zoom: 1});    });       // on panorama    var markerLouvrePanorama = new google.maps.Marker({       position: positionLouvre,       map: panorama,       title: 'Louvre Museum'    }); } 

We first defined the coordinates for the center of the map (we centered the map near the Eiffel tower). We also set the options for the map:

 var mapOptions = {    center: mapCenter,    zoom: 12,    mapTypeId: google.maps.MapTypeId.ROADMAP,    streetViewControl: true }; 

We have set the map center, zoom level, type and we have set the streetViewControl to true. This means a small pegman will be shown on the left of the map. By dragging it on different places on the map we can change the view in the streetview.

All we have to do now in order to show the map is create a new map object.

map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

For showing the street view next to the map, we have to follow similar steps. We first have to set the options for the panorama:

 // options for the panorama panoramaOptions = {    addressControl: true,    addressControlOptions: {       style: {backgroundColor: 'grey', color: 'yellow'}    },    position: mapCenter,    pov: {       heading: 140,       pitch: +10,       zoom: 1    } }; 

The addresscontrol is a small box that shows the address of the viewed location. We have set the background color and text color for it. We have defined the position of the panorama (same as the map center). And we have defined the point of view for the panorama. For the point of view, we can define the heading (the rotation angle of the camera locus), pitch (the angle variance "up" or "down") and zoom (zoom level of the view).

After setting the parameters, we have to create a new streetviewpanorama object and set the streetview of the map. Like this:

 // show the panorama in the map_canvas2 div element with the options that were set panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions);  // set street view for map map.setStreetView(panorama); 

We will also add some markers for a few places to visit. We will add markers on the map and on the streetview (yes, we can place markers on them). Here's the code for showing a marker (for the tour Eiffel marker; the others are the same, just the location is set to some other coordinates):

 // add marker for tour eiffel    // on map var marker = new google.maps.Marker({    position: mapCenter,    map: map,    title:"Paris visit starts here!" });    // on panorama var markerPanorama = new google.maps.Marker({    position: mapCenter,    map: panorama,    title: 'Tour Eiffel' }); 

For each marker we have set the position, the map where is appears and a title.
There's one more thing we need to do. We want the streetview to change when a user clicks on a marker on the map. For this, we have to add an event for when a user clicks on a marker and change the position and point of view of the panorama then.

 google.maps.event.addListener(marker, 'click', function() {    panorama.setPosition(mapCenter);    panorama.setPov({heading: 140, pitch: +10, zoom: 1}); }); 

I chose the values for the point of view in order for the panorama to focus on the building to visit.

So we now have a map of Paris and a street view panorama. The virtual visitors can use the pegman on the map to change the streetview and visit different sites. They can also move using the streetview panorama and "walk" through Paris. To view certain locations, they can use the markers we placed on the map. The only thing we have to add to our app is the tour of the islands. Here's how it will work: when the user presses on the "take tour" button, the tour is shown on the map, the panorama is centered on the start point of the tour (in front on the Notre Dame cathedral) and the steps of the tour are shown in the right panel. To take the tour, the user has to click on the steps in the right. When they click, the panorama will change and show the current location. To show the steps we will use the directions service.

Here's the function that is called when the "take tour" button is pressed:

 // function called when the island visit button is pressed; function visitIslands() {    // centers the map on the island and zooms it    var newMapCenter = new google.maps.LatLng(48.853372,2.350718);    map.setCenter(newMapCenter);    map.setZoom(14);     // add some points for the tour    var route1 = new google.maps.LatLng(48.853499,2.348090);//notre dame    var route2 = new google.maps.LatLng(48.854191,2.347457);    var route3 = new google.maps.LatLng(48.855659,2.348272);    var route4 = new google.maps.LatLng(48.856916,2.343434);    var route5 = new google.maps.LatLng(48.854370,2.344935);    var route6 = new google.maps.LatLng(48.852799,2.353309);    var route7 = new google.maps.LatLng(48.850647,2.357531);    var route8 = new google.maps.LatLng(48.851875,2.358626);    var route9 = new google.maps.LatLng(48.855038,2.350171); // set the position for the street view - the first point in the tour    panorama.setPosition(route1); // create DirectionsService object    directionsService = new google.maps.DirectionsService();    // set options for renderer    var rendererOptions = {       map: map    };    // create DirectionsRenderer object for showing the route directions    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); // the request for the directionsservice    var request = {      origin: route1,           // tour start      destination: route9, // tour end      waypoints: [             // waypoints: adding the points for the tour      {        location: route2,        stopover: false      },{        location: route3,        stopover: false      },{        location: route4,        stopover: false      },{        location: route5,        stopover: false      },{        location: route6,        stopover: false      },{        location: route7,        stopover: false      },{        location: route8,        stopover: false      }],      provideRouteAlternatives: false,     // don't look for alternative routes      travelMode: google.maps.DirectionsTravelMode.WALKING // travel mode set to walking    };     // make request to directions service    directionsService.route(request, function(result, status) {       if (status == google.maps.DirectionsStatus.OK)       {         // display the route on the map         directionsDisplay.setDirections(result);         // get routes array         var myRoute = result.routes[0];         // create the text to show in the right panel         var text = "<center>Islands Tour<br/><b>Notre Dame Cathedral -> Quai aux Fleurs</b></center>";         text += "<br/>Instructions:<br/>";         text += "<br/>Click on the instructions to view panorama!<br/>";         // find the instructions for the route and show then in the right panel         for (var i=0; i<myRoute.legs[0].steps.length; i++)         {            // show them as links, when they are clicked call the movePan function (parameter latitude and longitude for the start of the step)            text += "<br/><a style='cursor: pointer;' onclick='movePan("+myRoute.legs[0].steps[i].start_location.lat()+","+myRoute.legs[0].steps[i].start_location.lng()+")'>"+myRoute.legs[0].steps[i].instructions+"</a>";         }         // show the text on the page         document.getElementById('directions').innerHTML = text;      }    }); } 

Let's see what it does. First, we center the map on the islands and zoom the map. Then, we define some points on the tour route. We also set the position of the panorama to the start point. And now, we'll use the directions service to find the route.

We create the directionsservice object and a renderer to display the route on the map.

 // create DirectionsService object directionsService = new google.maps.DirectionsService(); // set options for renderer var rendererOptions = {    map: map }; // create DirectionsRenderer object for showing the route directions directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

Then we create a request for the directions service. We set the origin and destination of the desired route. We also set the other points we defined for the route as waypoints (the route returned by the directions service from google will have to pass through these waypoints). We instruct the service to not look for alternative routes and use the walking travel mode.

 // the request for the directionsservice var request = {    origin: route1,           // tour start    destination: route9, // tour end    waypoints: [             // waypoints: adding the points for the tour    {      location: route2,      stopover: false    },{      location: route3,      stopover: false    },{      location: route4,      stopover: false    },{      location: route5,      stopover: false    },{      location: route6,      stopover: false    },{      location: route7,      stopover: false    },{      location: route8,      stopover: false    }],    provideRouteAlternatives: false,     // don't look for alternative routes    travelMode: google.maps.DirectionsTravelMode.WALKING // travel mode set to walking }; 

We now have to make the request to the service and, when the result is received show the route on the map and the steps in the panel in the right.

 // make request to directions service directionsService.route(request, function(result, status) {    if (status == google.maps.DirectionsStatus.OK)    {       // display the route on the map       directionsDisplay.setDirections(result);       // get routes array       var myRoute = result.routes[0];       // create the text to show in the right panel       var text = "<center>Islands Tour<br/><b>Notre Dame Cathedral -> Quai aux Fleurs</b></center>";       text += "<br/>Instructions:<br/>";       text += "<br/>Click on the instructions to view panorama!<br/>";       // find the instructions for the route and show then in the right panel       for (var i=0; i<myRoute.legs[0].steps.length; i++)       {          // show them as links, when they are clicked call the movePan function (parameter latitude and longitude for the start of the step)          text += "<br/><a style='cursor: pointer;' onclick='movePan("+myRoute.legs[0].steps[i].start_location.lat()+","+myRoute.legs[0].steps[i].start_location.lng()+")'>"+myRoute.legs[0].steps[i].instructions+"</a>";       }       // show the text on the page       document.getElementById('directions').innerHTML = text;    } }); 

We have used the display renderer to show the route on the map. We also got the instruction for each step of the route and shown them in the right panel. As you can see, the movePan function is called when the steps are clicked on. The function takes the coordinates of the step as parameters.

 // called when the links with the tour directions are clicked function movePan(lat, lng) {    // modify the position of the street view panorama    panorama.setPosition(new google.maps.LatLng(lat, lng)); } 

The only thing it does is set the position for the panorama.

And we're done! We now know how to include streetviews in our apps!

If you have any questions or comments, don't hesitate to ask!