Last time I wrote about handling a Google map event, which is triggered, when a user moves around the map. I only mentioned that I had to use this solution for one of my projects, which goal was to display companies branches in a certain distance radius. I decided that it probably will be really interesting for all of you, how to display all company branches according to user input, therefore this time I will show you, how to retrieve the addresses of the places from a MySQL database, based on the zip code and radius provided by a user. I will also split this example in two parts. Todays part will only handle retrieving the results, displaying a simple navigation and markers on the map. In the second part we will push our project a little bit farther and we will allow our user to display the directions from the zip code he or she provided to the branch of his or hers choice.
Recently I was working on a project, in which the goal was to display all company branches within a certain distance, defined by a zip code and a range provided by user input. The solution was pretty simple. A user provides a zip code and the distance range, the script translates the zip code into geographical length and by using the Haversine formula retrieves all branches from the database and displays them in a Google map. This script was only working when a user submitted the information through a form that was provided for this script. As soon as he or she started to play with the Google map, the information about company's branches outside the initial zip code entered were not updated. When one assumes that a company has for instance 1000 Branches and resides in a small country, displaying other branches, while a user is moving within the Google map may be crucial to their search. I had to come up with an idea, how to solve this problem in my jQuery code. This is my solution.
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.
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.
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.