Beginning Google Maps API 3

329 Pages·2010·6.9 MB·English

by  Gabriel Svennerberg

CYAN YELLOW
MAGENTA BLACK
PANTONE 123 C
BOOKS FOR PROFESSIONALS BY PROFESSIONALS® THE EXPERT’S VOICE® IN WEB DEVELOPMENT
Companion
eBook
Beginning Google Maps API 3 Available
Beginning
Dear Reader,
G
Version 3 of the Google Maps API has been remade from the ground up. It’s
faster and more powerful than ever, yet it’s more lightweight. This makes it
o
very well suited for both desktop and mobile browsers. In this book, I guide
you through everything you need to know to integrate Google Maps on your o
own web sites. Don’t worry if you think your JavaScript skills might be a bit out Beginning
of tune—I explain all the details you need to know to get started. In fact, as an g
Gabriel Svennerberg
added bonus, you will learn a lot of JavaScript from reading this book.
l
These are some of the things you’ll learn: e
• How to build reliable Google Maps applications Google Maps
• Best practices using HTML, CSS, and JavaScript
• Transferring from version 2 to version 3 M
• Solutions to common problems most developers encounter, such as having
too many markers, as well as how to avoid common JavaScript pitfalls
a
• How to look up addresses and find the location of the user
p
I’ve written numerous articles and tutorials about the Google Maps API on
API 3
my blog, In usability we trust, at www.svennerberg.com. From the responses
s
I’ve received from my readers, I’ve realized that there’s a great need for simple
explanations on how to use the Google Maps API, and that has inspired me to
write this book. The Google Maps API is a powerful and fun API to work with, A
and I want to share my knowledge about it with others.
I hope that you will come to like the Google Maps API as much as I do and P
that you’ll create all kinds of awesome map applications after reading this book.
I
Gabriel Svennerberg
3
Learn how to build lightning fast mapping
Companion eBook
applications with the latest, totally remade,
S version of the Google Maps API
E
L
T
TI
D
E
See last page for details T
A
on $10 eBook version L
E
R
S
v
e
n Gabriel Svennerberg
SOURCE CODE ONLINE n
e
www.apress.com ISBN 978-1-4302-2802-8 r
53999 b
e
r
US $39.99 g
Shelve in:
Web Development
User level: 9 781430 228028
Beginner – Intermediate
this print for content only—size & color not accurate spine = 0.75" 328 page count
>
m
o
ok.c
o
b
e
w
o
w
w.
w
w
<
ok
o
B
e
w!
o
W
m
o
d fr
a
o
nl
w
o
D
Beginning Google Maps
API 3

■ ■ ■
Gabriel Svennerberg
Beginning Google Maps API 3
Copyright © 2010 by Gabriel Svennerberg
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording, or by any information storage or
retrieval system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-4302-2802-8
ISBN-13 (electronic): 978-1-4302-2803-5
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images
only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they
are not identified as such, is not to be taken as an expression of opinion as to whether or not they are
subject to proprietary rights.
President and Publisher: Paul Manning
Lead Editor: Matt Wade
Technical Reviewer: Rob Drimmie
Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell,
Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes,
Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke,
Dominic Shakeshaft, Matt Wade, Tom Welsh
Coordinating Editors: Mary Tobin and Jennifer L. Blackwell
Copy Editor: Kim Wimpsett
Compositor: Mary Sudul
Indexer: John Collin
Artist: April Milne
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring
Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail
[email protected], or visit www.springeronline.com.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use.
eBook versions and licenses are also available for most titles. For more information, reference our
Special Bulk Sales–eBook Licensing web page at www.apress.com/info/bulksales.
The information in this book is distributed on an “as is” basis, without warranty. Although every
precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have
any liability to any person or entity with respect to any loss or damage caused or alleged to be caused
directly or indirectly by the information contained in this work.
The source code for this book is available to readers at www.apress.com.
To my son, Ludvig, who was born during the writing of this book.
Contents at a Glance

Contents....................................................................................................................v
About the Author...................................................................................................xiii
About the Technical Reviewer...............................................................................xiv
Acknowledgments..................................................................................................xv
Introduction...........................................................................................................xvi

■ Chapter 1: Introducing the Google Maps API.......................................................1
■ Chapter 2: Transferring from Version 2 to 3........................................................7
■ Chapter 3: Creating Your First Map...................................................................23
■ Chapter 4: Taking the Map Further with MapOptions........................................45
■ Chapter 5: X Marks the Spot..............................................................................73
■ Chapter 6: Marker Icons..................................................................................101
■ Chapter 7: InfoWindow Tips and Tricks...........................................................131
■ Chapter 8: Creating Polylines and Polygons....................................................157
■ Chapter 9: Dealing with Massive Numbers of Markers...................................177
■ Chapter 10: Location, Location, Location.........................................................211
■ Appendix: API Reference..................................................................................243

Index.....................................................................................................................281
iv
■ CONTENTS

Contents

Contents at a Glance................................................................................................iv
About the Author...................................................................................................xiii
About the Technical Reviewer...............................................................................xiv
Acknowledgments..................................................................................................xv
Introduction...........................................................................................................xvi

■ Chapter 1: Introducing the Google Maps API.......................................................1
A Brief History..................................................................................................................2
How It Works...................................................................................................................3
A New API........................................................................................................................3
Slimmed-Down Feature Set...................................................................................................................3
Focus on Performance............................................................................................................................3
Mapping Fundamentals...................................................................................................4
Coordinates............................................................................................................................................4
Summary.........................................................................................................................6
■ Chapter 2: Transferring from Version 2 to 3........................................................7
What’s Different?.............................................................................................................7
A New Namespace.................................................................................................................................7
Extensive Use of Object Literals.............................................................................................................8
Asynchronous by Nature........................................................................................................................8
Converting from Version 2 to 3........................................................................................9
Adding a Reference to the API................................................................................................................9
v
■ CONTENTS

Creating a Map.....................................................................................................................................10
Markers................................................................................................................................................12
InfoWindows.........................................................................................................................................14
Polylines...............................................................................................................................................16
Polygons...............................................................................................................................................17
Events...................................................................................................................................................19
Summary.......................................................................................................................21
■ Chapter 3: Creating Your First Map...................................................................23
Setting the Scene..........................................................................................................23
The HTML Page.....................................................................................................................................23
What Flavor of HTML to Use.................................................................................................................24
Validate Your Code...............................................................................................................................24
Other Tools...........................................................................................................................................27
Laying the Foundation..........................................................................................................................27
Time to Start Coding......................................................................................................32
Debugging Tool: Firebug......................................................................................................................36
Setting Up the Map...............................................................................................................................37
Making the Code Run on Page Load.....................................................................................................40
Creating Maps for Mobile Devices.................................................................................43
Summary.......................................................................................................................43
■ Chapter 4: Taking the Map Further with MapOptions........................................45
A Fresh Start..................................................................................................................45
Controlling the User Interface........................................................................................46
disableDefaultUI...................................................................................................................................46
mapTypeControl...................................................................................................................................47
mapTypeControlOption.........................................................................................................................48
navigationControl.................................................................................................................................53
navigationControlOptions.....................................................................................................................54
scaleControl..........................................................................................................................................57
vi
■ CONTENTS

scaleControlOptions..............................................................................................................................58
keyboardShortcuts...............................................................................................................................58
disableDoubleClickZoom......................................................................................................................58
draggable.............................................................................................................................................59
scrollwheel...........................................................................................................................................59
streetViewControl.................................................................................................................................59
streetView.............................................................................................................................................61
Controlling the Map Container.......................................................................................61
noClear.................................................................................................................................................61
backgroundColor..................................................................................................................................61
Controlling the Cursor....................................................................................................62
draggableCursor...................................................................................................................................62
draggingCursor.....................................................................................................................................63
Controlling the Map Settings with Methods..................................................................63
setOptions.............................................................................................................................................64
The Specific Methods...........................................................................................................................64
Putting the Methods to Use..................................................................................................................65
Dynamically Changing the MapOptions Object.....................................................................................68
The Complete Code..............................................................................................................................71
Summary.......................................................................................................................72
■ Chapter 5: X Marks the Spot..............................................................................73
Setting a Starting Point..................................................................................................73
A Simple Marker............................................................................................................74
Adding a Tooltip....................................................................................................................................75
Changing the Icon.................................................................................................................................76
The Complete Code So Far...................................................................................................................78
Adding an InfoWindow..........................................................................................................................79
The Complete Code..............................................................................................................................82
More Markers.......................................................................................................................................83
Adding U.S. Cities to the Map...............................................................................................................85
vii
■ CONTENTS

Automatically Adjusting the Viewport to Fit All Markers...............................................95
Introducing the LatLngBounds Object..................................................................................................96
Let the API Do the Heavy Lifting...........................................................................................................97
The Complete Code........................................................................................................98
Summary.....................................................................................................................100
■ Chapter 6: Marker Icons..................................................................................101
Setting a Starting Point................................................................................................101
Changing the Marker Icon...........................................................................................102
Introducing the MarkerImage Object..................................................................................................102
MarkerImage’s Five Properties...........................................................................................................102
Adding a Custom Icon to a Marker.....................................................................................................103
Putting It Together..............................................................................................................................103
Enabling and Disabling the Shadow...................................................................................................106
Defining a Clickable Area...................................................................................................................107
The Complete Code............................................................................................................................109
Using Sprites...............................................................................................................109
Latency...............................................................................................................................................111
Sprite Support....................................................................................................................................111
The Complete Code............................................................................................................................114
Where to Find Icons.....................................................................................................115
google-maps-icons.............................................................................................................................115
Google Maps: Colored Markers..........................................................................................................116
Mapito Map Marker Icons...................................................................................................................116
Changing the Marker Icon According to Mouse Events...............................................117
Defining the MarkerImages................................................................................................................118
Adding the Events...............................................................................................................................118
The Complete Code............................................................................................................................120
A Clever Way of Dealing with Lots of Different Marker Icons......................................122
Adding Dynamic Data.........................................................................................................................124
viii