In usability we trust

UX and all things web

Beta chapter from my upcoming book on Google Maps API v3

blank_book_200I am in the process of writing a book about the new Google Maps API v3. I thought that I would make the process a bit more open by releasing beta chapters that some people might read and give feedback on. Hopefully one of those people is you!

Update: The book is finished and was published by Apress with the name Beginning Google Maps API 3. You can check it out on Amazon.com.

There are two reasons why I am doing this:

  1. The main reason is that I think the book will be a better one from it.
  2. The second reason is that I think it can act as a motivation booster for myself to actually finish the book.

About the book

In short the book is about how to use Google Maps API v3. It will teach the basics but also provide tips and tricks about more advanced stuff. It will be very hands on with lots of examples that can be used right away. You can read more about it in the article Iโ€™m writing a book about Google Maps.

Download the chapter

I am not going to release the chapters in chronological order so the first chapter to be released in public beta is not the first but rather one in the middle. It is about Markers and is called X Marks the Spot.

Download the chapter, read it, and tell me what you think. Either by posting a comment below or by contacting me directly through the contact page.

X_marks_the_spot-public_beta_1.pdf (791 Kb)

Update: There’s an error in the code examples at page 15 and 19. The method set_content() that’s being used has changed name to setContent() since I wrote this chapter. So make sure to make this correction if you try out the examples and everything will work fine.

18 Comments

  1. I read through the marker chapter. It looks good! It’s easily readable and the just the right level of detail for me. I recently got my feet wet with the API by cloning Ms. Fox’s many markers example Here’s my helloworld map page based on Ms fox’s example: http://www.core3.com/p11/googleMapWork.php?n=ti You click an name in the upper right corner and it displays the location. I’ve been looking through her code and the maps API. However, it’s great to have things explained in simple terms. For instance, you explained why adding the listener requires a function parameter (instead of variables) to avoid certain behaviors. I never would have figured out that for myself (or it would have taken too much time). I now want to add multiple markers to a map based on data from an XML file or a SQL table which I know is pretty much basic functionality for the maps API. I hope you finish the book. Based on the beta chapter, I’ll buy a copy when it’s released. -Tony

  2. Tony: Thank you so much for the feedback and the encouraging words! I’m very happy that you find that it has the right level of detail!

    Good luck with learning the API! You have already come far!

  3. Gabriel — thank you SO MUCH for your amazing GMaps3 API articles, and also for the beta chapter of your book. I can’t wait to buy it! The way you lead into the examples, and your writing style is absolutely brilliant!

    Please don’t be shy about letting us all know when the book is coming out; I’ll purchase immediately! And if you need pre-orders, to make finishing easier — sign me up right now. I’ll paypal you! ๐Ÿ™‚

    Again, thank you so much. Your articles and your clear-thinking have helped me a great deal in a silly little GMaps3API project I decided to start working on. I’m a systems guy (Engineer) not a programmer, but your clear-headed lucidity has made my PHP –> Javascript transition a LOT easier.

    Thanks again!

    -Rick Tait
    Hollywood, CA

  4. Rick: Thanks for your feedback! I’m glad that you like it! ๐Ÿ™‚ I’ll make sure to let you know when it’s ready.

  5. Gabriel,

    I am a FileMaker developer, who is trying to build up a map from data in an application i am building. Using the Get method i am transmitting the geodata of the markers and i want to get them into the ‘places’ variable from the example in your chapter. (This was very helpful by the way)
    This is where i am running into difficulties:
    If i try to do this:
    var places=[“(51.5340368, 4.4642582),(51.5325215, 4.46487),(51.5335787, 4.4613263)”]
    I get a map which is centered around the LatLng that i previously entered in the code, without any markers at all.
    If i do this:
    var places=[]
    //Adding a LatLng object for each playground
    places.push(new google.maps.LatLng(51.5340368,4.4642582))
    places.push(new google.maps.LatLng(51.5325215,4.4648700))
    places.push(new google.maps.LatLng(51.5335787,4.4613263))
    I get exactly what i want. What is the difference?

  6. Jan: The difference is that in the first example you create an array that contains one string and in the other example you create an array that contains several LatLng objects which are the only valid objects to define a position in the map.

  7. Good one!

    If only I had your book already! Nice chapter. For me as greenhorn at js it seems to fit quite perfect!

    In the moment I struggle with how to best load in data (xml or array) and found already browser dependent xml parser. If you have any good example or a link to it, would be great!

    How about your book? ๐Ÿ™‚ Let me stay informed!.

    Thanks for your great website and efforts.

    Cheers, Martin

  8. I loved the chapter and I would buy the book right now if it were available. The flow was great and included the perfect amount of code an illustration. Looking forward to more!

  9. Im a php coder, fairly new to JS and in turn the maps API, this book is exactly what I am looking for. I did go ahead and test those final code in this chapter and it did not seem to create info windows for the marker. That got me to poking around a bit and you book uses the following line….

    infowindow.set_content(‘Place no ‘ + no);

    but set_content is not a function. Having a small project built around v3 API when it was in beta I had some stuff change, presumably when google took that API from beta to release they renamed some stuff and set_content should now be setContent.

    I hope any error like this in the book are cleaned up before its published or it could be a mess. Nice work though, I already have the book preordered.

  10. Larry: Yeah, they’ve renamed all the methods with underscore in them to camel cased ones in the API after I wrote the beta chapter. It’s corrected in the final book though, so don’t worry! ๐Ÿ™‚

    I’m happy to hear that you liked the chapter even though it contained errors. If everything goes as planned, the book will be available in August.

  11. Thanks for sharing this. I’ve looked around and there don’t seem to be any really good guts and bolts books on the v3 api and I would definitely be interested in one.

    Would you happen to know of a way to resize markers dynamically? I’ve figured out how to hook into the zoom event and get the zoom level change to work with. For now, I am calling a script as an image that outputs different sized images on the fly depending on the zoom level. This does exactly what I want, but I’m wondering if there is an easier, pure js way to do this with the v3 api.

    Love the website, too. Lots of great info. Keep up the good work ๐Ÿ™‚

  12. Casey: There’s sort of a way of resizing them dynamically. If you use the MarkerImage class to create the icon for the marker, it has a property called scaledSize with which you can change the size of the image. The only problem is that the MarkerImage object can’t be changed once it has been created so you have to have one MarkerImage for each zoom level. You’ll only need one physical image though.

    Check out the MarkerImage object in the documentation.

  13. I tried using that, but it only resized the clickable area while the image remained the same size. So, I had a 30×30 marker, used the MarkerImage object to set a new marker with a scaleSize of 100×100 to test, and only the click area got bigger. I could hover over the marker 70px to the right and under the 30×30 icon and, when clicked, the info window popped up 20px to the right… the halfway point if I had used a real 100×100 icon. Maybe I was doing something wrong, but it seemed like scaleSize only allocated the area for the marker and didn’t resize the image one way or the other. I wish Google had better documentation on all this, that’s why a book on it would be great.

  14. Well, I tried again and scaleSize does work. Thanks for pointing me in the right direction. I must have been calculating the size wrong before. Works like a charm now. Thanks again! Looking forward to the book.

  15. Hey Gabriel, great start on your book!

    For the red teardrop marker on first page, it would be neat to show the shadow as well.

    > The marker object is conveniently available in the google.maps.Marker namespace.

    google.maps is the namespace, google.maps.Marker is a constructor.

    > The reason is that itโ€™s just plain wrong to steal other peopleโ€™s bandwidth without permission.

    You could also mention another, more pragmatic reason: they may move their file and break your application.

    > Icons supplied by Google.

    You might also want to mention that Google Chart API supports customized map pins:
    http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins

    > It can be plain text, HTML or a reference to a HTML-ยญ?node.

    Technically the content can’t be plain text, it has to be a HTML string or a DOM node. Specifically, plain text containing HTML entities such as “<" will not render correctly unless it is first HTML-escaped.

    Sorry to nit-pick, your book looks awesome so far ๐Ÿ™‚

    – Ben

  16. Ben Appleton: Thanks a lot for your feedback, I really appreciate it! The book is progressing well and this chapter has seen some significant changes since I published the beta version. I think there’s still a chance to make some additions in the second pass of the chapter though.

    The nit-pick is the stuff I’m looking for. It’s very useful to me! ๐Ÿ™‚

  17. Casey: There’s sort of a way of resizing them dynamically. If you use the MarkerImage class to create the icon for the marker, it has a property called scaledSize with which you can change the size of the image. The only problem is that the MarkerImage object can’t be changed once it has been created so you have to have one MarkerImage for each zoom level. You’ll only need one physical image though.

    Check out the MarkerImage object in the documentation.

  18. Thanks for the great chapter. It’s been a big help so far in helping me create a Google map for our church’s website. I have been unable, however, to deal with the window closure problem. I can write the function to add markers and info windows to the map without any problems, but when I revise the code in the loop to call the new function, nothing comes up on the website. I am using exactly what is in the book (modified of course for my purposes): for (var i = 0; i < gender.length; i += 1) {
    addMarker(gender[i], i);
    }
    Any suggestions on what I am doing wrong?

Leave a Reply

Your email address will not be published.

*