Tải bản đầy đủ

Beginning google maps API 3








THE EXPERT’S VOICE ® IN WEB DEVELOPMENT

Beginning

Google Maps
API 3
Learn how to build lightning fast mapping
applications with the latest, totally remade,
version of the Google Maps API






Gabriel Svennerberg



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 (201) 348-4505, e-mail
orders-ny@springer-sbm.com, or visit www.springeronline.com.
For information on translations, please e-mail rights@apress.com, 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 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


■ CONTENTS

Faking an Ajax Call .............................................................................................................................124
The Complete Code ............................................................................................................................126
Benefits ..............................................................................................................................................128

Creating a Custom Marker Icon ...................................................................................128
Online Tools ........................................................................................................................................128

Summary .....................................................................................................................129
■ Chapter 7: InfoWindow Tips and Tricks ...........................................................131
Setting a Starting Point................................................................................................131
Style Sheet .........................................................................................................................................132
JavaScript...........................................................................................................................................133

Adding Rich Content to the InfoWindow ......................................................................133
Providing the HTML As a String ..........................................................................................................134
The Complete Code ............................................................................................................................137

Inserting a Video Using HTML5....................................................................................139
Browser Support.................................................................................................................................139
Altering the HTML ...............................................................................................................................140
Examining the

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×