I used a tutorial on jQuery and Google Maps as a starting point. Google Maps is now on version 3, not version 2 (which the tutorial uses). I picked the locations from a paper map that shows some shops in downtown Burlington, Wisconsin.
While developing the page, I ran into two issues: Missing Marker and Multiple InfoWindows not displaying.
I had 11 shops and only 10 were showing up on the map. After removing most of the locations, I got the missing one to show up. I discovered that two shops share the same location (building) which means they have the same longitude and latitude. In order to show both, I had to change to code to place both shops on the same marker.
Multiple InfoWindows not displaying
I wanted to add InfoWindows so you could learn a little more about the shop. With Google Maps API V3, I ran into a problem with multiple InfoWindows. It would only show the last InfoWindow, no matter which marker I clicked on. After researching Google, I found Google Maps API V3 Multiple Markers, Multiple Infowindows. Colin Wiseman walks you through the problem and provides you with a solution. I used his solution to fix this issue.
Resetting your CSS means removing all built-in browser styling, so that you can avoid cross-browser differences as much as possible. By resetting your CSS, you can create a consistent look across browsers. The downside is that you end up restyling elements that you reset earlier. Which means that you duplicate effort and increase the processing time of your website.
If you don’t want to duplicate your efforts, what can you do? You can normalize your CSS. Normalize preserves useful browser settings and provides cross-browser consistency. It gives you greater control because you can include sections that are specific to your website. You don’t have to clutter your style sheets with elements that you never use on your site. This helps to cut down on the amount of code in your style sheet.
Which CSS method should you choose?
Both reset and normalize are tools to help you style your website. For example, I first built a website using reset and then changed it to normalize. When I changed to normalize, I had to make a few minor adjustment to get the normalized CSS to match the reset CSS. These minor adjustments were needed to make the website look right. As with any tools, there are trade offs. You need to choose the tools that help you solve your problems.
Do you know what a scientist looks like? When asked, most people come up with an image of an old, white male in a lab coat. While some scientists do fit that description, scientists are a diverse group of people. While some may work in a lab, many scientists spend their days out in the world looking for rare plants or insects, studying sea life like sharks or the stars. On the website, This is what a scientist looks like, they show you photos of real scientists and science students. You’ll see pictures of scientists at work and play. This site is focused on changing the stereotype of what a scientist is. It includes a photo of an all scientist roller derby team from University of Illinois, Urbana-Champaign.
I found a simple and quick tutorial on building a lightbox. In Super Simple Lightbox with CSS and jQuery, you learn how to build a really simple lightbox. This lightbox tutorial is quick and easy to implement. They walk you through the HTML markup, CSS and jQuery. By following the steps, you can get the lightbox working in no time. Faster, if you decide to download the source files.