Google Maps and jQuery – calculating distance between two points
It has been a long time since I wrote my last example, but I've been really busy. Lately I got a request to write an example about calculating the distance between two points using KML file. What I will show you in this example is how to provide an user two drop down fields, which will be build according to provided KML file. Choosing each field will show a marker on the map. Changing the drop down field will cause removal of an according marker and placement of it in a new location. Also the markers will have two different colors, so an user can differentiate between starting and ending point. As the last functionality we will add a button. After an user clicks on the button, our function will calculate the rout and display the distance in kilometers. Let's start with a simple class which we will use to display drop down field and retrieve the coordination of requested place.
Google Maps, jQuery and XML – saving markers with user input
I just got a first request from a user of my site to help him with his problem. Let me describe it in detail. Assume that a user is visiting your site and he or she wants to place a marker on a google map displayed on your page. Additionally, we want to get some input from our user, therefore after he or she clicks on the google map we will provide an info could with a form. Our user will be able to provide a name, a message and a link and submit it. I didn't want to make this example too complicated, therefore handling the links or uploading the files you will have to solve by yourself. Let's move to the code.
jQuery – show / hide button for multiple div containers with AJAX and JSON
This time I will consider another case of loading content into div containers using jQuery, AJAX and JSON request. In an other example I showed you how you can simply load content into one div container using AJAX and provide a user show and hide button.
In this example I want to consider a different case. Sometimes you don't only have one div container which needs to be filled out with content but multiple containers which need to be filled out with content according to the link which was clicked by the user. Again we will provide a functionality of changing the label of our button. We will extend this example by handling a larger amount of data in our response. For that reason we will use build in functionality of jQuery to handle JSON requests.
Loading content into multiple div containers using jQuery and JSON
Because I didn't write anything in a long time and because I just changed the layout of my site, I decided to write a new example about jQuery and extend it this time with JSON. After studying google analytics I noticed that people are mostly interested in jQuery examples and specifically in showing and hiding content after users click. Because I already covered this example, I decided that this time I'll show you, how to load content into different div containers at one time. If you assume that you want to load content into more boxes, you definitely need to use JSON (JavaScript Object Notation). Of course one can say that XML would be suitable for this example as well, but the advantage of JSON is that it doesn't produce that much overhead. Of course XML is more versatile than JSON but with build in function of jQuery you can easily process received date.
New design
Because I am not a CSS guru and I was tired with adjusting my style sheets for every single browser (mostly IE6) I decided to redesign my blog and use YAML framework. I really enjoyed working with it. It gives you plenty of dummy layouts, which you can use and change according to your needs. I am still not fully satisfied with this layout, but it is better than before. If there are any designers around looking at my blog I have an offer for them. I am not a designer, but I can help you with your programming. If you have problems with your site, we can make a deal. If it's not a big project I can write it for you, and you can make a new design for me. How does it sound?:) I'm waiting for your offers.
jQuery drop down – loading content according to option
It was a really busy day for me today, so I came up with a simple code for displaying content according to the option our user chooses from drop down list. What we will try to accomplish is to provide a user a drop down list and load content from a remote PHP file using AJAX request. Additionally we will filter the data and display only the content relevant to the chosen option. We will also make use of chainability of jQuery and add a nice fade in effect after the text is loaded.