How To Use the MapQuest SDK with the iPhone
I'm a developer at MapQuest. This article represents my thoughts and opinions alone, and not that of MapQuest or its parent company, AOL.
Recently MapQuest has released the Javascript SDK 6.0 on the developer beta site. In this release the javascript toolkit has learned some new tricks, and works seemlessly on the iPhone. This means that you can use MapQuest draggable maps with mobile safari.
Creating a Demo Page
Getting started you'll need to add a meta tag to your page, which will allow the touch events on the screen to work correctly with the map.
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0">
This will allow pinch gestures to zoom the map in or out, rather than zooming in and out on the page itself.
The next step is to set up the container div for map, and size it correctly to the full viewport.
<div id="map" style="width: 320px; height: 356px"></div>
Finally create the map, and you can use the built in geolocation functionality to center the map on the user's location
Map = new MQA.TileMap(document.getElementById('map'),
10, {lat: 40.0378, lng: -76.305801});
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
Map.setCenter(latLng);
});
You can view the complete demo page on an iPhone or the iPhone Simulator on a Mac.