Google Maps API 3

Recommendations

Info

CHAPTER 9 ■ DEALING WITH MASSIVE NUMBERS OF MARKERS Figure 9-6. These two markers will not be clustered since they reside in different squares of the grid Distance-Based Clustering This technique looks at each individual marker and checks whether it’s nearby other markers. If it’s close enough to another marker, the two of them will be grouped into a cluster. Distance-based clustering also has its drawbacks. Since the clusters will appear at random locations depending on where a cluster is formed they may not make sense for the user. Regional Clustering A third technique is regional clustering. What this means is that you define different geographical regions, such as counties or states. All markers in each region will be grouped into a cluster. You also define at which zoom level the cluster will break up into separate markers (or smaller clusters). The advantage of this technique is that you can create clusters that make more sense to the user. The drawback is that it requires more effort and can’t as easily be automated as the other clustering techniques. Some Practical Examples We will soon take a look at some solutions for dealing with too many markers. But before you do that, you will create a map that features a lot of markers so that you have a problem to fix. Therefore, you will write some code that will auto generate markers at random locations. 182
CHAPTER 9 ■ DEALING WITH MASSIVE NUMBERS OF MARKERS The Starting Point As usual the starting point will be a regular map of the United States (Listing 9-1). Listing 9-1. The Starting JavaScript Code (function() { window.onload = function(){ }; })(); // Creating a map var options = { zoom: 3, center: new google.maps.LatLng(37.09, -95.71), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), options); OK, so now that we have a starting point, let’s add some functionality. What you want to do is to generate markers within the current viewport. The first thing you need to do is to find out the boundaries of the map so you know where to put the markers. The boundaries indicate what part of the map that’s visible to the user, that is, what part of the map that’s in the viewport. Calculating the Current Map Boundaries To get the current boundaries you execute the getBounds() method of the map object. It returns a LatLngBounds object. I discussed this object in greater detail in Chapter 5, but in short, it’s a rectangle. var bounds = map.getBounds(); You would think that running this line of code would return the boundaries of the map, but it doesn’t. If you examine the bounds variable, you will see that it’s undefined. The reason is the asynchronous nature of the Google Maps API. When you call the getBounds() method, the bounds don’t yet exist. This means that you need to wait for the bounds to get ready. To do this, you need to listen for the map objects bounds_changed event. Once that event has fired, you can be certain that it’s available for you. So to make your code work, you need to add that event listener and put your code inside the event handler. Since you want this code to run only once, just when the map has finished loading, you’re going to use a special method to add the event listener. It’s called addListenerOnce(), and the good thing about it is that it removes itself once its event has triggered (see Table 9-1). Other than that, it works exactly as the addListener() method that you’ve used before. google.maps.event.addListenerOnce(map, 'bounds_changed', function() { }); var bounds = map.getBounds(); 183
Page 1:
THE EXPERT’S VOICE ® IN WEB DEVE
Page 4 and 5:
Beginning Google Maps API 3 Copyrig
Page 6 and 7:
Contents at a Glance Contents......
Page 8 and 9:
■ CONTENTS Creating a Map .......
Page 10 and 11:
■ CONTENTS Automatically Adjustin
Page 12 and 13:
■ CONTENTS ■ Chapter 8: Creatin
Page 14 and 15:
■ CONTENTS MapCanvasProjection Ob
Page 16 and 17:
About the Technical Reviewer ■ Ro
Page 18 and 19:
Introduction This book started out
Page 20 and 21:
CHAPTER 1 ■ INTRODUCING THE GOOGL
Page 22 and 23:
Page 24 and 25:
Page 26 and 27:
CHAPTER 2 ■ TRANSFERRING FROM VER
Page 28 and 29:
Page 30 and 31:
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 41 and 42:
C H A P T E R 3 ■ ■ ■ Creatin
Page 43 and 44:
CHAPTER 3 ■ CREATING YOUR FIRST M
Page 45 and 46:
Page 47 and 48:
Page 49 and 50:
Page 51 and 52:
Page 53 and 54:
Page 55 and 56:
Page 57 and 58:
Page 59 and 60:
Page 61:
Page 64 and 65:
CHAPTER 4 ■ TAKING THE MAP FURTHE
Page 66 and 67:
Page 68 and 69:
Page 70 and 71:
Page 72 and 73:
Page 74 and 75:
Page 76 and 77:
Page 78 and 79:
Page 80 and 81:
Page 82 and 83:
Page 84 and 85:
Page 86 and 87:
Page 88 and 89:
Page 90 and 91:
Page 92 and 93:
CHAPTER 5 ■ X MARKS THE SPOT Figu
Page 94 and 95:
CHAPTER 5 ■ X MARKS THE SPOT Figu
Page 96 and 97:
CHAPTER 5 ■ X MARKS THE SPOT List
Page 98 and 99:
CHAPTER 5 ■ X MARKS THE SPOT A Si
Page 100 and 101:
CHAPTER 5 ■ X MARKS THE SPOT coul
Page 102 and 103:
CHAPTER 5 ■ X MARKS THE SPOT The
Page 104 and 105:
CHAPTER 5 ■ X MARKS THE SPOT }; }
Page 106 and 107:
CHAPTER 5 ■ X MARKS THE SPOT Addi
Page 108 and 109:
CHAPTER 5 ■ X MARKS THE SPOT Nest
Page 110 and 111:
CHAPTER 5 ■ X MARKS THE SPOT for
Page 112 and 113:
CHAPTER 5 ■ X MARKS THE SPOT What
Page 114 and 115:
CHAPTER 5 ■ X MARKS THE SPOT Auto
Page 116 and 117:
CHAPTER 5 ■ X MARKS THE SPOT List
Page 118 and 119:
CHAPTER 5 ■ X MARKS THE SPOT }; }
Page 120 and 121:
CHAPTER 6 ■ MARKER ICONS Changing
Page 122 and 123:
CHAPTER 6 ■ MARKER ICONS Figure 6
Page 124 and 125:
CHAPTER 6 ■ MARKER ICONS ■ Note
Page 126 and 127:
Page 128 and 129:
CHAPTER 6 ■ MARKER ICONS Using Sp
Page 130 and 131:
CHAPTER 6 ■ MARKER ICONS Origin t
Page 132 and 133:
Page 134 and 135:
CHAPTER 6 ■ MARKER ICONS Google M
Page 136 and 137:
CHAPTER 6 ■ MARKER ICONS Defining
Page 138 and 139:
Page 140 and 141:
CHAPTER 6 ■ MARKER ICONS A Clever
Page 142 and 143:
CHAPTER 6 ■ MARKER ICONS Adding D
Page 144 and 145:
Page 146 and 147:
CHAPTER 6 ■ MARKER ICONS Benefits
Page 149 and 150: C H A P T E R 7 ■ ■ ■ InfoWin
Page 151 and 152: CHAPTER 7 ■ INFOWINDOW TIPS AND T
Page 173: CHAPTER 7 ■ INFOWINDOW TIPS AND T
Page 176 and 177: CHAPTER 8 ■ CREATING POLYLINES AN
Page 196 and 197: CHAPTER 9 ■ DEALING WITH MASSIVE
Page 230 and 231: CHAPTER 10 ■ LOCATION, LOCATION,
Page 250 and 251:
CHAPTER 10 ■ LOCATION, LOCATION,
Page 252 and 253:
Page 254 and 255:
Page 256 and 257:
Page 258 and 259:
Page 260 and 261:
Page 262 and 263:
APPENDIX ■ API REFERENCE The Name
Page 264 and 265:
APPENDIX ■ API REFERENCE Method R
Page 266 and 267:
APPENDIX ■ API REFERENCE MapOptio
Page 268 and 269:
APPENDIX ■ API REFERENCE Constant
Page 270 and 271:
APPENDIX ■ API REFERENCE ScaleCon
Page 272 and 273:
APPENDIX ■ API REFERENCE MapPanes
Page 274 and 275:
APPENDIX ■ API REFERENCE Table A-
Page 276 and 277:
APPENDIX ■ API REFERENCE Event Ar
Page 278 and 279:
Page 280 and 281:
Page 282 and 283:
Page 284 and 285:
APPENDIX ■ API REFERENCE Property
Page 286 and 287:
Page 288 and 289:
Page 290 and 291:
APPENDIX ■ API REFERENCE Geocoder
Page 292 and 293:
APPENDIX ■ API REFERENCE LatLng C
Page 294 and 295:
APPENDIX ■ API REFERENCE Method R
Page 296 and 297:
APPENDIX ■ API REFERENCE MVCObjec
Page 299 and 300:
• • • Index •A addDomListen
Page 301 and 302:
•INDEX latency, 111 limits on dow
Page 303 and 304:
•INDEX prime meridian, 4 x proper
Page 305 and 306:
•INDEX addListener() see addListe
Page 307 and 308:
•INDEX building address lookup we
Page 309 and 310:
•INDEX handleError function build
Page 311 and 312:
•INDEX size of, 137 v2/v3 compare
Page 313 and 314:
•INDEX creating zoom-in link in I
Page 315 and 316:
•INDEX adding rich content to Inf
Page 317 and 318:
•INDEX maxZoom property, 209 mini
Page 319 and 320:
•INDEX Map object, 247 Marker cla
Page 321 and 322:
•INDEX creating donuts, 170 fillC
Page 323 and 324:
•INDEX MapTypeId class, 51, 52, 2
Page 325 and 326:
•INDEX src attribute, video eleme
Page 327 and 328:
•INDEX streetViewControl, 59—61
show all

Google Maps API 3

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?