You're reading from Google Maps JavaScript API Cookbook This book will help you use the amazing resource that is Google Maps to your own ends. From showing maps on mobiles to creating GIS applications, this lively, recipe-packed guide is all you need.

Product type Paperback

Published in Dec 2013

Publisher Packt

ISBN-13 9781849698825

Length 316 pages

Edition 1st Edition

Languages

JavaScript

Tools

Maps JavaScript API

Concepts

Geospatial Analysis

Table of Contents (10) Chapters

Preface

1. Google Maps JavaScript API Basics FREE CHAPTER

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

Creating a simple fullscreen map

Applications can be mapped in different formats. Some of them show a map after a mouse click or an event, and some of them are shown directly in fullscreen mode.

This recipe will show you how to create a fullscreen map that will be used both in web or mobile applications.

Getting ready

As stated before, some recipes will show only the changed lines in the code in order to make way for more recipes. This recipe is the modified version of the previous recipe, Creating a simple map in a custom DIV element.

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

How to do it…

You can easily create a simple fullscreen map by following the given steps:

Let's start by creating a new empty file named full_screen_map.html. Then, copy all of the code in the previous HTML file (map.html) and paste it into this file.

Find the following lines of code in the new file:

    <style type="text/css">
         #mapDiv { width: 800px; height: 500px; }
    </style>

Add the following lines and change them according to the new values stated. The width and height values are changed to 100% in order to make the map full screen in the browser viewport. Also, the margin value of the body element is changed to 0 to remove all the spaces around the map.
```
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; }
    #mapDiv { width: 100%; height: 100%; }
</style>
```
Enter the URL of your local server, where your full_screen_map.html file is stored, in your favorite browser and take a look at the result. You will see the map with navigation controls at the top-left corner and the base map control at the top-right corner that fills the entire browser area.

Thus we have successfully created a simple fullscreen map.

How it works...

The Google Maps JavaScript API uses the div component of the HTML standard to show the map. The div component gets its style and properties from CSS rules, which are defined at the top, in the <head> element. The width and height attributes of #mapdiv show that the div component will fill the entire browser space. You can easily modify these width and height properties to change the map dimensions according to your needs.

There's more...

The size of the map is directly related to CSS styles, and there is no direct relation between the map size and the Google Maps JavaScript API. The DIV element that holds the Google Maps JavaScript API's base maps and overlays is just a blank container, and as the DIV elements get larger, so does your map.