MapQuest API: Location Plotting, Centering & Automatic Zooming using PHP and jQuery

*** Skip to Sample and Final Code ***

I recently implemented custom map/location functionality into a website for a client. Normally when I use maps on websites, I tend to use Google Maps and typically stick to the standard provided embed code. In this specific case, the map needed to be slightly more customized and for a few various reasons, I ended up selecting MapQuest instead. Essentially what was needed was a map that popped up in a floating div that could show any number of locations, based on data specified in an address field. Also the map needed to by default, pick a somewhat central location and proper zoom factor so all these locations would show up without any extra work on the user’s end. This turned out to be a little more challenging than I originally assumed. To get started, I signed up for a MapQuest application key. Upon retrieving the key, I create a file called show_map.php and place this in the code:

Breaking Up the Data

This map feature was an addition to a pre-existing site with custom functionality and a database larger than I really wanted to manipulate manually. The field that contained address data was just a generic text field. This single text field contained the addresses (and phone numbers) of all the different locations in different formats, much like this:

In some cases commas were used. Other cases, they weren’t. Phone numbers are different formats. Fortunately for the most part it was just 1 per line. Also MapQuest is somewhat generous when it comes to address formats. So the only real problem I had with the data was stripping out the inconsistent phone formats. To do so, I added the following code to my show_map.php file.

This now results in an array that looks like this:

Centering

The addresses I am dealing with tend to be located close to each other geographically, relative to the size of the earth. So instead of going through complex math formulas, I treat the locations as if they are on a flat 2-dimensional surface instead of the surface of a sphere. I imagined drawing a box around the upper and lower limits of the map like this:

Now I can just calculate the center point of this rectangle, and use that as my center point. If it’s slightly off, that’s okay as long as all the points show up. To actually do this I had to convert the above addresses into latitude and longitude, then take the minimum and maximum latitudes and longitudes, and replace them into the coordinates above:

MapQuest can retrieve the latitude and longitude for an address in either JSON or XML format. I chose to use JSON. From that data I calculated my “center point”.

We now have an approximate center point for our map.

Calculating Zoom Factor

Next we need to calculate an appropriate zoom factor. No matter the zoom factor or size of the map, MapQuest’s kilometer scale is 77px wide. This means we can calculate the width of our entire display map in kilometers in addition to pixels. In theory this means, the zoom factor we are looking for, is the largest value that keeps the width/height of the entire map area, larger than the target rectangle.

Displaying the Map

Now that we’ve taken care of the calculations, it’s time to display the map.

jQuery UI Slider I can pull the zoom out of the map. To do so, the HTML above would change to:

ThickBox.

After proper installation of thickbox, all I have to do is add a link to show_map.php from some other page.

Want to see how it works? Try it out: Sample Map Link
Want the source for the final show_map.php file? Download It

David Stinemetze is the Lead Developer and Director of Social Media for San Antonio Web Design, SEO and Hosting firm, Internet Direct.

Website | Facebook | Twitter

You can leave a comment via Facebook. Don't have a Facebook account? No worries. Just click "Other Comments" to leave your feedback.

  1. Aiko says:

    Nice piece of coding! I never used MapQuest but it’s certainly worth looking at once I need to use a map again.

    I’ve used thickbox a couple of times and it’s a good script. Recently I moved over to Floatbox because it has a lot more options and is highly configurable. Use it to embed movies as well. Take a look at my blog to see how it works. The link to Floatbox is on the bottom of my pages. Good thing is it’s free for personal use.

    • Thank’s for the comments.

      I’m eventually gonna stop using thickbox, given that it’s deprecated and all. I’ve just gotten quite comfortable with it, since it’s quick and easy. I’ve used it so many times that it’s practically second nature. Aesthetically speaking, I’m ready to find a new solution, but I just haven’t had the time to do the necessary research. Hopefully I’ll be able to do so soon.

  2. Brian says:

    You can also use the MQA.TileMap.bestFit() function instead of figuring out the zoom and center yourself. You can also use the MapInit object to set both before creating the map. It’s not documented yet, but here is a sample using the MapInit method.

    http://mqdemo.com/brian/mapinit.html

    Love the jQuery slider zoom control. Great idea.

    • Interesting. I’ll have to give it a shot. When I originally wrote this, I didn’t remember seeing the bestFit function anywhere as it probably would have saved me a bit of time. That’s okay though. It gave me some extra experience dealing with the API.

      The jQuery zoom made so much more sense to me than the zoom that just manages to get in the way of the map. Plus you can style it however you want.

      Thanks for the feedback!

  3. Susan says:

    Is there a way to have mapquest SORT the data it returns? “Nearest locations” first.

    • Nearest location, relative to what? In my example, I am doing a make shift central point calculation. If you want the nearest locations to the central point, which is something I calculate after the fact, any sorting would have to be done in my code.

      If you’re looking for the closest location based on the user’s current position, that can be a bit tricky. If on a mobile device you can probably tie it into the GPS in the phone if it has one, otherwise you’re dependent on the IP address. IP address location isn’t an exact science. I’ve seen some instances of IP addesses that are physically located in San Antonio, TX be attributed to service providers in Austin, TX and Plano, TX. So the nearest to the user’s IP address is probably not the nearest to their actual location.

      Now if you’re trying to sort the nearest from some fixed point, then there maybe something in the MapQuest API that allows you to do that. I honestly haven’t looked that far into it, so I’m not 100% sure.

Leave a Reply

Your email address will not be published. Required fields are marked *