Developing location-aware applications in IBM Worklight, Part 3: Working with maps
Christian Karasiewicz 270005XS4E Visits (4773)
This blog post is contributed by Hisham Abdel-Hafez, an Expert IT Specialist in IBM Egypt and IBM Redbooks thought leader.
In part 1 and part 2 of this series, we discussed how to get the current location of the mobile device, how to turn this location into a human-readable address and how to use advanced features to track user’s location. Now it is time to take it to the next level, the visual level, showing all of this on a map that users can interact with. There are multiple options for doing this, and this post will discuss two of them: using OpenLayers and using Google Maps.
The first step is to include the OpenLayers.js library in your application. So in your main Worklight HTML file add the next line of code:
Instead of including the library directly from the OpenLayers repository, you can download the library files and add them to your Worklight project.The next step is to show a map. You will first need to create a placeholder DOM element for the map content and then simply use this code to display the map.
Another approach to display maps on mobile apps is to use the Google Maps application programming interface (API) using class google.maps.Map. To create an object of this class you need to pass to it a DOM element that it will use (typically an HTML div) and a MapOptions object to use for configuration. This object will contain parameters for where to center the map, what is the needed zoom level and what is the map type, like in the snippet below. Once the map object is constructed, it will start showing up immediately.
var latLang = new goog
Creating a marker on the map to show a certain point of interest on a map is piece of cake. You just create an object of type google.maps.Marker giving it the position of the marker, and then set the map object that this marker will use. Once you call marker.setMap it will start showing there.
var marker = new goog
Continue the discussion with me on Twitter.