-

Google Maps Power Tools for Maximizing the API

Evangelos Petroutsos

Mc Graw Hill Education

New York Chicago San Francisco Athens London Madrid Mexico City Milan

New Delhi Singapore Sydney Toronto

Contents

Acknowledgments xv Introduction xvii

Chapter 1 Introduction to Maps and the Google API 1 Building Map-Driven Applications 2

The Map Tiles 2 Cartography 101 5

The Mercator Projection 6 A Global Addressing Scheme: Parallels and Meridians 10

Converting Angles to Length Units 12 The Google Maps API 15

Using the Google Maps API 15 Summary 18

Chapter 2 Designing Web Pages with Embedded Maps 19 The Structure of a Web Page 19 Adding a Map to Your Page 24

Is Notepad the Editor of Choice? 27 Map Localization 28 Zooming with the Mouse 29 The Map's Controls 30

Adding Markers to the Map 32 A Useful Template for Mapping Pages 34

Designing the Demo Map Page 35 Summary 40

Chapter 3 Web Page Scripting: An Introduction to JavaScript 41 What Is JavaScript? 41

How to Test JavaScript Code 43 JavaScript's Basic Syntax 45

Variables and Data Types 47 Arithmetic Operations 48 Math Operations 49 Working with Text 51 Working with Dates 54

Control Flow Statements 56 Conditional Statements 56 Looping Statements 59

ix

X Google Maps: Power Tools for Maximizing the API

Functions 62 Arrays 65

Array Propert ies and Methods 66 Summary 70

Chapter 4 Advanced JavaScript Topics 71 Storing Data in Custom Objects 71

Creating Objects On the Fly 72 Variables and Objects 74 Objects and Methods 75 Prototyping Custom Objects 77

Custom Objects as Collections 79 Event Listeners 82

Passing Information to the Event Listener 82 Removing an Existing Listener 84

Closures 84 Summary 89

Chapter 5 Google Maps API: The Building Blocks of Mapping Applications 91 The Google Maps API at a Glance 91 The g o o g l e . m a p s . Map Object 92

Map Initialization 93 Map Opt ions 94 Map Methods 98 The Marker and InfoWindow Objects 100

Working with Map Events 100 The Basic Map Events Application 101 Drag Events 101 Mouse Events 103 State Events 105

A Customized Map 106 Adding a Context Menu to the Map 109

Designing the Context Menu 110 Displaying the Context Menu I l l A More Elaborate Context Menu 113 T h e Multiple Maps Application 115

Summary 116

Chapter 6 Windows Mapping: Embedding Maps in Desktop Applications 117 Why a Desktop Application 118

Using Google Maps with Desktop Applications 118 T h e WebBrowser Control 119

The Windows Mapping Application 121 The Application's Architecture 121 Designing the Application 123 Building the Windows Interface 126 Adding Custom Functions to the Script 127

Contents XI

Function Return Values 130 Notifying the Host Application with Method Calls 131

The Interaction Model of the Two Components 133 Initializing the Map 134 Updating the Interface 135 Adding the Context Menu 137 Tracking User Navigation 140 Adding Markers to the Map 142

Summary 144 Chapter 7 Markers: Identifying Locations on the Map 145

Marking Locations on the Map 145 Adding a New Marker 146

Qualifying Markers with InfoWindows 148 Customizing the Marker's Icon 150 Placing Multiple Markers on the Map 150

The RichMarker Control 152 Annotating a Map with RichMarkers 155

An Alternate Approach to InfoWindows 158 Summary 161

Chapter 8 Feature Annotation: Drawing Shapes on Maps 163 Polylines 163

Polyline Construction 165 Polygons 166

Polygons with Holes 166 Polygon Islands 168 Displaying a Crosshair on the Map 169 Rectangles 171

Circles 172 Fixed-Size Circles 173

Storing Paths in MVCArrays 175 An Editable Polyline 175 Placing Symbols Along Polylines 179

Handling Large Paths 181 Summary 183

Chapter 9 Interactive Drawing: The Basics of Drawing on Google Maps 185 Who Needs to Draw on a Map? 185 A Simple Web Application for Drawing on Maps 187

Outlining the Interaction Model 189 A Simple Starting Point 191

The Interactive Drawing Application 195 Handling Vertices 196 Handling Shapes 199 Customizing the Vertex Icons 200 Retrieving Shape Data 201

xii Google Maps: Power Tools for Maximizing the API

A Windows Map Drawing Application 203 Interacting with the Script from a .NET Application 203 The .NET Code 204

The Map Tracing Application 206 How to Use the Application 206

Summary 208 Chapter 10 Geodesic Calculations: The Geometry Library 209

A Quick Overview of the Mercator Projection 209 Geodesic Lines and Shapes 211

Defining Geodesic Paths 212 The Geometry Library 221

The g e o m e t r y , s p h e r i c a l Methods 222 The g e o m e t r y . p o l y Functions 223 Exercising the Geometry Library 224 Rhumb Lines 226

Encoded Paths 228 Summary 229

Chapter 11 The KML Data Format: Persisting Spatial Data 231 XML 101 231

XML Uses Named Delimiters 232 Nesting XML Elements 233 Qualifying Elements with Attributes 234 The Three XML Rules 234

Understanding KML 235 The Structure of a KML Document 235 Viewing KML Files on Google Maps 239 Tools for Preparing KML Files 243 Adding a KML Layer to Your Map 244 Handling KML Events 246

Organizing Placemarks in Folders 250 Generating KML Files 251 Summary 253

Chapter 12 Adding GIS Features to Mapping Applications 255 The Simple GIS Application 255

The Basic Features of the Application 257 The Desktop Version of Simple GIS 267 Saving the Map Annotations 273

Summary 276 Chapter 13 SQL Spatial: Backend Databases for Spatial Data 277

Using Tables with Spatial Features 278 Designing the Sample Tables 279 Inserting Spatial Data 281 Outer and Inner Polygons 286 Handling Data with SQL Server Management Studio 287

Contents XÜi

Querying Spatial Data 290 Calculating Distances 291 Line Lengths and Polygon Areas 292 Intersections 294 Joining Tables on Geo-Coordinates 299 Additional Spatial Features 300

Converting Geography Features into JSON Objects 304 Summary 306

Chapter 14 Marker Clustering: Handling Many Markers on the Map 307 Handling Maps with Too Many Markers 308

Display Markers as You Go 309 The MarkerClusterer Component 313

Summary 315 Chapter 15 Web Services: Updating Maps On the Fly 317

Web Services 318 Calling an Existing Web Service 318 Contacting the Web Service from Within Your Script 324 Calling XML Web Services 325 Processing XML Documents in JavaScript 327

Preparing Spatial Data for the Web 330 Reading the County Borders 333

Building a Web Service 338 Summary 339

Chapter 16 Map Annotation and Map Generation Techniques 341 The Process of Preparing Annotated Maps 342

An Alternate Approach to Info Windows 343 Annotating Maps with Labels 346 Map Generation Techniques 354

Summary 355 Chapter 17 More Google Services: The Geocoding and Directions APIs 357

The Geocoding API 358 The Geocoding Response 358 The Response's Elements 362 Using the Geocoding API from Within JavaScript 363

The Directions API 369 Using the Directions Web Service 370 The Directions Request and Response 370

Summary 380 Chapter 18 Visualizing Large Datasets 381

Beyond Markers 381 Visualizing the Earthquakes 384

Parsing the Earthquake Data 385 Interacting with the Symbols 387

XJV Google Maps: Power Tools for Maximizing the API

Heatmaps 389 Constructing the Heatmap 390

Summary 394 Chapter 19 Animating Items on the Map 395

Animating Items on a Map 395 Basic Animation Concepts 397

JavaScript Animation 397 The Paris Metro Animated 399 The Paris Metro Simple Page 407 Animating All Metro Lines 413

Summary 414

Chapter 20 Advanced JavaScript Animation 415 Scalable Vector Graphics 415

Creating SVG Icons 416 Using the SVG Icon 418

Animated Flights 418 Scaling the Flight Animation Time 419

Animated Heatmaps 424 The Animation Function 427 Aggregating the Rainfall Values 429

Index 433