Moving from the Web to mobile devices

Mobile devices are getting more popular nowadays; all the popular websites are preparing their mobile apps or sites in order for people to access them anywhere. Mapping applications have also become more popular since accessing the location of a device with proper APIs was introduced in HTML5.

In this recipe, we will prepare a mapping application that will run on mobile browsers in full screen, and it will zoom to the location of a device with the help of the W3C Geolocation API. This API is also accessible from desktop browsers to get your location.

Getting ready

This code will be run on a mobile device or simulator, so make sure that your code will be accessible from your mobile device or simulator. In this recipe, I suggest you upload the code to a hosting server or website so that it could be accessed easily from your mobile device or simulator.

You can find the source code at Chapter 1/ch01_mobile_map.html.

How to do it…

If you want to create a map that is optimum for mobile devices, you should follow the given steps:

1. Let's start by creating a new empty file named mobile_map.html. Then, copy all of the code in the HTML file (map.html) that was introduced in the Creating a simple map in a custom DIV element recipe, and paste it into the new file.
2. Find the following lines of code in the new file:

   <!-- Include Google Maps JS API -->
   <script type="text/javascript"
       src="https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_MAP_API_KEY_HERE&sensor=false">
   </script>

3. Insert the following line before the previous code block. This line tells mobile browsers that the current web application is designed for mobile devices:

   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

4. Add the following CSS styles in order to make the map fullscreen.

       <style type="text/css">
           html { height: 100% }
           body { height: 100%; margin: 0; }
           #mapDiv { width: 100%; height: 100%; }
       </style>

5. Then, add the following code block after creating the map object. This code block will check whether your browser supports the Geolocation API and sets the center of the map according to the coordinates of the device.

   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
           var lat = position.coords.latitude;
           var lng = position.coords.longitude;
           //Creating LatLng object with latitude and //longitude.
           var devCenter =  new google.maps.LatLng(lat, lng);
           map.setCenter(devCenter);
           map.setZoom(15);
       });
   }

6. Upload your file to a proper hosting site and check this URL on your mobile device or simulator. You will be asked whether to allow the reading of your location or not. If you allow it, you will see the map of your location.
   

This is how we achieve the goal of creating a simple map for mobile devices.

How it works...

The <meta> tags are used by browsers and search engines, and they are not visible to the users. They help browsers know how to behave. In our case, the following <meta> tag is used to tell browsers that the current website is optimized for mobile browsers:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

This <meta> tag solves zooming problems when the user pinches in or out, because pinching in or out should zoom the map in or out respectively and not the document itself.

In order to get the device location, the W3C Geolocation API implemented by browsers is used. There is a navigator namespace in the HTML5 standard, and the Geolocation subnamespace is checked first if the browser has support for the Geolocation API. If navigator.geolocation returns an object, we can get the coordinates with the help of the getCurrentPosition function. The callback function gets the latitude and longitude of the device and creates the google.maps.LatLng object. Then, the setCenter method of the map object is triggered with the devCenter object that was created before. This will change the center of the map according to the device location.

The last line of the callback function is used to set the zoom level of the map. This can be changed according to your needs.

There's more...

The HTML5 standard is still in progress, and there can be changes in the W3 Geolocation API. If you want to get more information about geolocation, refer to the W3C documentation site (http://dev.w3.org/geo/api/spec-source.html).

See also

• The Creating a simple map in a custom DIV element recipe