Using Sprites and MarkerImage in Google Maps JS API v3

Background

Sprites are used frequently in modern websites. They are simply a large image that contains many smaller images. They have been around for quite a while and were used in old video games such as Doom. The idea was to load a single large image into memory and then to display parts of that image when necessary. This would avoid having to load new images every time a certain image was required. It is a common misconception that by having many smaller sized images, that the page will load faster. This isn’t true because of the way HTTP requests work. Each image requires a single HTTP request and most browsers will only execute two HTTP requests at a time from a single hostname. This provides a bottleneck which is seen when the page loads. So by using sprites, you can combine many images into a single large image. Then as a particular image is required, you can display a certain area of the sprite without requiring an additional HTTP request. Creating a sprite may seem complicated at first, but there are many tools that can help you create sprites from existing images. One of the tools I’ve used is a website known as http://spriteme.org.

You may have noticed on some Google Maps implementations, markers on the map will have a unique or interesting image for their icon. Google Maps allows you to do this using the MarkerImage class.

The constructors you’ll need to be familiar with:
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)

Point(x:number, y:number)

Size(width:number, height:number, widthUnit?:string, heightUnit?:string)

Example

To get a basic sprite image working with MarkerImage, you’ll need to determine the size of the image you want to display and its relative location in the sprite image. By default the coordinate system used by Google Maps specifies that the origin is located at the top left of the image (0, 0). If you want to go to the right, increase the “x” value. If you want to go down, increase the “y” value. Once you have all this information you can begin.

var size = new google.maps.Size(16, 16, "px", "px");

var origin = new google.maps.Point(0, 0);

var icon = new google.maps.MarkerImage("http://path/to/sprite.png", size, origin, null, null);

In the above code, I’m creating a size object of 16×16 pixels and passing it to the MarkerImage constructor along with the origin of the image I want to use starting at (0, 0). This means that once the MarkerImage is created, I’ll have a 16×16 px image from the point of origin of (0, 0) from sprite.png.

Now suppose the sprite contains two 16×16 pixel images one above another in the sprite.png and they were separated by a single pixel. I can now obtain that secondary image by changing the point of origin that is passed into the MarkerImage constructor. So in this case the new code to get the second image would be:

var origin2 = new google.maps.Point(0, 18);

var icon2 = new google.maps.MarkerImage("http://path/to/sprite.png", size, origin, null, null);

Now that the origin is located at (0, 18) the icon2 object will contain a different 16×16 pixel image starting from that location. Which in this case, is the second 16×16 image that I wanted. The reason why the origin is now located at (0, 18) is because the original 16×16 image started at (0, 0). Then you have to factor in the image size you just took which brings you to (0, 16). Since the images are separated by a single pixel, you’ll be at (0, 17). So that makes the start of the second 16×16 image one pixel further at (0, 18).

Last week when I was implementing this concept into a Google Map project I was working on, it was very difficult to find any good examples. I hope this serves as a simple example. You may have noticed that my constructor call for MarkerImage is also passed two null arguments. These are for the anchor and scaledSize parameters. With these you can do even more neat stuff with the MarkerImage class. For example, scaledSize will allow you to change the size of the image by stretching or shrinking it. For more information, check out the Google Maps API Reference. If you need more help you can check out this blog post by Marc Ridey.

Edmonton Startup Weekend

I’ve been quite busy lately and haven’t had the chance to write up a post about my first experience at the Edmonton Startup weekend event. For those of you that don’t know, Startup weekend is a 54 hour event that brings together software developers, designers, and business people that collaborate to build an application and maybe even start a business with. The event was held at the University of Alberta in the Computing Sciences Centre from February 11th to 13th. This is the second year that the event has been held in Edmonton.

To kick off Friday night, we all gathered around 6:00 pm in one of the rooms of the CSC building. The organizers introduced themselves, and gave a little overview of what the weekend would entail. From there, we were given the opportunity to discuss some ideas that people had in mind or wanted to tackle during the weekend. After a little mingling session, the organizers asked for everyone with an idea to come forward and present the idea to the rest of the group. Each person was given roughly a minute to give an elevator pitch to the rest of the audience about the idea they had and the kinds of people they were looking to work with.  After this, we all broke out into separate parts of the room to meet with people and discuss ideas we were interested in further. Shortly after, groups started to form and we ended up planning for the rest of the weekend before heading off for the rest of the night. When I first heard about the Startup weekend, I figured it would just be a bunch of developers looking to collaborate on a project, but I was wrong. I met a lot of people that night, with different skills and backgrounds. It was interesting to see such a diverse crowd of people that it completely changed my expectations of that weekend. I ended up going with the Rubber Chicken Assassin idea. The group consisted of nine other people including: Brendan, Cam, David, Eric, Jed, Jeff, Nathan, Pieter, and Sarah.

When Saturday came around, I reached the University at 9:00 am. This is when I had the chance to set up the development environment that I would work with for the rest of the weekend. I thought I would be quite a breeze to set up everything, but I was wrong. I had run into multiple issues trying to set up Ruby on Rails onto my Windows laptop. But with help from my teammates, I was able to get everything running within a few hours. From here, we started working on our assigned tasked. I was assigned to work with two other people, Nathan and Eric, on the server/back-end of the application. It was my first time using Rails so I had no idea what I was doing. Nathan definitely was the team lead for the three of us and helped us get through any problems we encountered. Everyone worked throughout the day right until 10:00pm when we decided to call it a night.

On Sunday, we met back at 9:30 am and began wrapping up our assigned tasks. We were to have our application/project ready for demos at 6 in the evening so you could imagine lots of frantic development happened during the day. When 6:00 pm rolled around, we rushed over to Original Joe’s for the closing of the second Edmonton Startup weekend event. Here, each group was given the chance to show everyone else what they had worked on for the past few days. When I saw some of the work that came out of this weekend, I was surprised by how much could actually be accomplished in such a short time. David Quail gave a great speech that night about his experience with a start up company. It was really interesting to hear firsthand from someone who had been there and knows what it’s like to be in a “startup” environment. To end the night, we all had drinks and got a chance to talk to the rest of the people who attended the event.

One thing that I haven’t mentioned yet is the food. The meals that were served over the weekend were AMAZING. We had pizza, pastas, salads, snacks, and even drinks throughout each day. I think I ate more that weekend, than I did the entire week before the event. Come to think of it, I spent more time eating than working!

Overall, my experience at the Startup weekend event was truly exciting and amazing. The people you meet and the experience you gain is well worth the price. The price of the event pretty much covers the cost of your meals, so really you’re getting to meet like-minded individuals and maybe even learn something new for free while having a blast doing it. I left the event with many new friends and some experience with Rails. I will definitely participate in the next event and recommend anyone else who is interested to attend as well. So keep your eye open for the next event and be sure to attend if you get the chance.

And for those of you that are curious, we will be continuing development with the Rubber Chicken Assassin idea. We hope to launch Phase 1 of it shortly. So look out for that too!

Oh hi.

You’ve stumbled upon my blog.