HTML5 and JavaScript Projects: Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications

© Jeanine Meyer 2018

Jeanine MeyerHTML5 and JavaScript Projectshttps://doi.org/10.1007/978-1-4842-3864-6_4

4. Map Maker: Combining Google Maps and the Canvas

Jeanine Meyer¹ 

(1)

New York, USA

 

In this chapter, you will learn the following:

• Use the Google Maps API to display a map at a specific location

• Draw graphics on a canvas using transparency (also known as the alpha or opacity level) and a customized cursor icon

• Provide a graphical user interface (GUI) to your users by combining the use of Google Maps and HTML5 features by managing the events and the z-index levels

• Calculate the distance between two geographical locations

Introduction

The project for this chapter is an application involving a geographic map. Many applications today involve the use of ...