Search icon CANCEL
Subscription
0
Cart icon
Cart
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Google Maps JavaScript API Cookbook

You're reading from  Google Maps JavaScript API Cookbook

Product type Book
Published in Dec 2013
Publisher Packt
ISBN-13 9781849698825
Pages 316 pages
Edition 1st Edition
Languages
Toc

Table of Contents (15) Chapters close

Google Maps JavaScript API Cookbook
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
1. Google Maps JavaScript API Basics 2. Adding Raster Layers 3. Adding Vector Layers 4. Working with Controls 5. Understanding Google Maps JavaScript API Events 6. Google Maps JavaScript Libraries 7. Working with Services 8. Mastering the Google Maps JavaScript API through Advanced Recipes Index

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

You have been reading a chapter from
Google Maps JavaScript API Cookbook
Published in: Dec 2013 Publisher: Packt ISBN-13: 9781849698825
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime}