Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Google Maps JavaScript API Cookbook
  • Toc
  • feedback
Google Maps JavaScript API Cookbook

Google Maps JavaScript API Cookbook

By : Dincer, Uraz
4.3 (8)
close
Google Maps JavaScript API Cookbook

Google Maps JavaScript API Cookbook

4.3 (8)
By: Dincer, Uraz

Overview of this book

Day by day, the use of location data is becoming more and more popular, and Google is one of the main game changers in this area. The Google Maps JavaScript API is one of the most functional and robust mapping APIs used among Geo developers. With Google Maps, you can build location-based apps, maps for mobile apps, visualize geospatial data, and customize your own maps.Google Maps JavaScript API Cookbook is a practical, hands-on guide that provides you with a number of clear, step-by-step recipes that will help you to unleash the capabilities of the Google Maps JavaScript API in conjunction with open source or commercial GIS servers and services through a number of practical examples of real world scenarios. This book begins by covering the essentials of including simple maps for Web and mobile, adding vector and raster layers, styling your own base maps, creating your own controls and responding to events, and including your own events.You will learn how to integrate open source or commercial GIS servers and services including ArcGIS Server, GeoServer, CartoDB, Fusion Tables, and Google Maps Engine with the Google Maps JavaScript API. You will also extend the Google Maps JavaScript API to push its capabilities to the limit with additional libraries and services including geometry, AdSense, geocoding, directions, and StreetView.This book covers everything you need to know about creating a web map or GIS applications using the Google Maps JavaScript API on multiple platforms.
Table of Contents (10 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Google Maps JavaScript API Basics
chevron up
1. Google Maps JavaScript API Basics
Introduction
Creating a simple map in a custom DIV element
Creating a simple fullscreen map
Moving from the Web to mobile devices
Changing map properties programmatically
Changing base maps
2
2. Adding Raster Layers
2. Adding Raster Layers
Introduction
Styling of Google base maps
Using different tile sources as base maps
Adding tile overlays to maps
Adding image overlays to maps
Changing the transparency of overlays
Creating a heat map
Adding the traffic layer
Adding the transit layer
Adding the bicycling layer
Adding the weather and cloud layers
Adding the Panoramio layer
3
3. Adding Vector Layers
3. Adding Vector Layers
Introduction
Adding markers to maps
Adding popups to markers or maps
Adding lines to maps
Adding polygons to maps
Adding circles/rectangles to maps
Adding animated lines to maps
Adding KML/GeoRSS layers
Adding GeoJSON to the Google Maps JavaScript API
Adding WKT to the Google Maps JavaScript API
4
4. Working with Controls
4. Working with Controls
Introduction
Adding and removing controls
Changing the position of controls
Creating and adding a geolocation control
Creating a table of contents control for layers
Adding your own logo as a control
5
5. Understanding Google Maps JavaScript API Events
5. Understanding Google Maps JavaScript API Events
Introduction
Creating two synced maps side by side
Getting the coordinates of a mouse click
Creating a context menu on a map
Restricting the map extent
Creating a control that shows coordinates
Creating your own events
6
6. Google Maps JavaScript Libraries
6. Google Maps JavaScript Libraries
Introduction
Drawing shapes on the map
Calculating the length/area of polylines and polygons
Encoding coordinates
Searching for and showing nearby places
Finding places with the autocomplete option
Adding drag zoom to the map
Creating custom popups/infoboxes
7
7. Working with Services
7. Working with Services
Introduction
Finding coordinates for an address
Finding addresses on a map with a click
Getting elevations on a map with a click
Creating a distance matrix for the given locations
Getting directions for the given locations
Adding Street View to your maps
8
8. Mastering the Google Maps JavaScript API through Advanced Recipes
8. Mastering the Google Maps JavaScript API through Advanced Recipes
Introduction
Adding WMS layers to maps
Adding Fusion Tables layers to maps
Adding CartoDB layers to maps
Accessing ArcGIS Server with the Google Maps JavaScript API
Accessing GeoServer with the Google Maps JavaScript API
9
Index
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:

  1. 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.
  2. Find the following lines of code in the new file:
        <style type="text/css">
         #mapDiv { width: 800px; height: 500px; }
    </style>
  3. 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>
  4. 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.
    How to do it…

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.

See also

  • The Creating a simple map in a custom DIV element recipe
End of Section 4
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete