Google Maps API 3

Recommendations

Info

CHAPTER 3 ■ CREATING YOUR FIRST MAP It might look a bit odd, but it’s really quite clever. First, an anonymous function looks like function() { }. By encapsulating it inside a set of parentheses, you return the function to the rest of the code. The parentheses at the end immediately execute the function, which means that the code inside will run immediately but will be invisible to all code outside it. It might be easier to understand if you add an argument to the function: (function(message) { alert(message); })('Hello Google Maps lovers'); This code will immediately execute the anonymous function, passing the text string to it, which will result in an alert being thrown with the text “Hello Google Maps lovers” (see Figure 3-7). Figure 3-7. An alert box being thrown This construction is one way of encapsulating code. That said, you can use other patterns to accomplish the same thing, but this is how I prefer to do it. You can use whatever pattern suits you; what’s important is to somehow encapsulate the code. ■ Tip To read about other JavaScript programming patterns, check out the article “JavaScript Programming Patterns” by Klaus Komenda at www.klauskomenda.com/code/javascript-programming-patterns/. Applying this pattern to the example, the final code will look like Listing 3-5. Listing 3-5. The Final JavaScript Code (function() { window.onload = function() { var mapDiv = document.getElementById('map'); var latlng = new google.maps.LatLng(37.09, -95.71); var options = { center: latlng, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(mapDiv, options); } })(); 42
CHAPTER 3 ■ CREATING YOUR FIRST MAP The map will look and work the same way, but your variables will no longer be available for outside code, thereby not cluttering the global namespace. Creating Maps for Mobile Devices Better support for mobile devices was one of the main goals for Google Maps API v3. It is specifically adapted to work well on advanced mobile devices such as the iPhone and mobile phones using the Android OS. Creating maps for these devices is done the same way as for desktop browsers, but since they have smaller screens and have other ways of interacting with the items on the screen, such as the zoom-to-pinch gesture on the iPhone, there are some considerations that need to be made. Since the screens are smaller, you probably want the map to fill the entire screen. You do this by setting the height and width of the containing the map to 100 percent. For the iPhone, there’s a special element that can be used for disabling the zoom-to-pinch behavior for the browser. The element must be positioned within the section of the web page; it looks like this: You should also be aware that there’s no such thing as hover (mouseover) on mobile devices, so you shouldn’t build functionality that relies solely on that being available. You can find more information on how to develop web pages specifically for these devices here: • Safari Dev Center (iPhone) http://developer.apple.com/safari/ • Android Developers http://developer.android.com/index.html Summary In this chapter, you learned how to set up a web page and how to insert a fully functional Google map in it. The map has all the basic functionality, which means that you can pan it, zoom in and out of it, and change the map type. You now have a solid map to build from. You also learned about some of the basic features of the JavaScript language. With the knowledge gained from this chapter, you’re ready to examine how you can tweak the map to look and behave the way you want, and that’s exactly what you’re going to do in the next chapter where you will examine all the properties of the MapOptions object. 43
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 26 and 27: CHAPTER 2 ■ TRANSFERRING FROM VER
Page 41 and 42: C H A P T E R 3 ■ ■ ■ Creatin
Page 43 and 44: CHAPTER 3 ■ CREATING YOUR FIRST M
Page 59: CHAPTER 3 ■ CREATING YOUR FIRST M
Page 64 and 65: CHAPTER 4 ■ TAKING THE MAP FURTHE
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 153 and 154:
Page 155 and 156:
Page 157 and 158:
Page 159 and 160:
Page 161 and 162:
Page 163 and 164:
Page 165 and 166:
Page 167 and 168:
Page 169 and 170:
Page 171 and 172:
Page 173:
Page 176 and 177:
CHAPTER 8 ■ CREATING POLYLINES AN
Page 178 and 179:
Page 180 and 181:
Page 182 and 183:
Page 184 and 185:
Page 186 and 187:
Page 188 and 189:
Page 190 and 191:
Page 192 and 193:
Page 194 and 195:
Page 196 and 197:
CHAPTER 9 ■ DEALING WITH MASSIVE
Page 198 and 199:
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206 and 207:
Page 208 and 209:
Page 210 and 211:
Page 212 and 213:
Page 214 and 215:
Page 216 and 217:
Page 218 and 219:
Page 220 and 221:
Page 222 and 223:
Page 224 and 225:
Page 226 and 227:
Page 228 and 229:
Page 230 and 231:
CHAPTER 10 ■ LOCATION, LOCATION,
Page 232 and 233:
Page 234 and 235:
Page 236 and 237:
Page 238 and 239:
Page 240 and 241:
Page 242 and 243:
Page 244 and 245:
Page 246 and 247:
Page 248 and 249:
Page 250 and 251:
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?