PHP with Bing Maps

The Toolkit for PHP with Virtual Earth aka Bing Maps is one of the useful tools that we announced and on our Interoperability Bridges site. The toolkit provides a set of files that allow you to connect your server running PHP to a set of client web browser files in JQuery, Javascript, JSON that in turn access the Virtual Earth or Bing maps services in the cloud via request/responses. That’s a whole set of technologies working together to ease developing solutions.

The database that connects to PHP can either be either MySQL or Microsoft SQL Server and the kit ships with both of these in two separate downloadable (.zip) hosted on the Codeplex project site. The open source code is also available from this site and contributors welcome to check it out or contribute to it.

This scenario involves PHP using MySQL. In this case I want to be able to create pins on a Bing Map from a simple form on a web page and a database that stores the location. You have the ability of storing it directly into the database via the service with both the latitude and longitude as raw data or you have a provided helper application that will search a common address and store it transparently in the database and render it on a map as well as do some basic input checking.

You will need to have a web server running PHP 5.2 or higher installed, you must have JSON enabled for previous versions. An internet connection and Javascript enabled in your browser will also be necessary. The phpMyAdmin tool will be useful in setting up the initial database schema. The entries would each have a title, description, latitude and longitude and a position ID as a key. This will all be delivered back as JSON through the returnresults.php service included in the solution. Modify the $serverName variable in this file with the database server name. $uid and $pwd will need to be modified appropriately to a valid database user and password. $dbname changed to the correct database where you created the entries earlier. You will now have a service that will retrieve and store the data for your map.

You may want to add some sample values at the beginning so that some new shapes can be rendered by the mapping service. The pushpin shape is handy here and comes as a default in the solution. You can either populate the locations from your database tool or you can use the example below.

It’s a good idea to change the first variables in map.js with the starting location of your map and the zoom value by changing the results below, set for Seattle WA and it’s surroundings. It will give you a nice user experience if you start with a default that shows where there is a good number of pins or your first entry.

Then create a new html file with in the headers

The following statement loads the map from the mapping service, the function is provided in maps.js

Create a placeholder in the body for the rendered map, the following div will do this for you,

Then bring up a form which calls the other functions also located in the file maps.js. The proper way is to use form that calls the FindAndAddPin function by passing a title, description and location. You can also render the map by itself by omitting this form if you don’t want users to be able to modify it. The service will call the mapping service to find the location provided and provide a callback with an array that includes the latitude longitude. This in turn is stored by the SavePushPin function through the returnresults.php service to the local store we created earlier.

For illustration, you can use the alternate form that calls the SavePushPin function directly and it will write the latitude and longitude via service to the database. It will render the location when the map changes in any way and the function MapChangeHandler, receives an event . That handler lives in the GetMap function in reference earlier. Panning and Zooming the mouse will do the trick and update the values.

Save the html file and put it in the same folder or reference it appropriately along with returnresults.php, map.js, map.css and jquery-1.2.6.js included in the solution package you downloaded on your website and view in your browser!

That’s all you will need to display a Bing map on your site with pre-populated locations using a little PHP, JQuery, JSON and HTML!

Jas Sandhu
Technical Evangelist, Interop Vendor Alliance Manager, Interoperability Strategy Team
Twitter@jassand, FriendFeed@jassand